JS memo

お洒落にJavaScript。

2019年6月30日10:23

Javascriptの顔認識APIで顔をひょっとこにしてみた

メインビジュアル

Javascriptの顔認識APIで顔をひょっとこにしてみた

最近画像や写真内に写っている商品やオブジェクトを認識して検索してくれるGoogleさんが開発したアプリにはまっているのですが、 ふと「javascriptでも画像認識するアプリを作ってみたい」と思いました。

調べてみるとccv.jsとface.jsというライブラリーで顔認証機能が簡単に実装できそうなので、今回は写真内の人の顔を認識してひょっとこモザイクをかけるアプリを作ってみました。
ちなみに今回使用するひょっとこイラストは私がインスタに写真をあげる時によく使っている、数秒ほどで書いたクオリティー低めのひょっとこちゃんです。

目次
  1. デモ
  2. 必要なライブラリー
  3. 作成するコード
  4. まとめ

デモ

今回作成するひょっとこモザイクはこんな感じです。

必要なライブラリー

ccv.jsface.jsをダウンロードしておきます。

ccv.jsとは

pythonやC++、Javaなどで使用されている画像や動画を処理するためのライブラリー「OpenCV」から派生したJavascriptで画像や動画処理ができるライブラリー

face.jsとは

顔認識をするためのデータパータンが入ったライブラリー

作成するコード

HTML

ccv.jsとface、モザイク処理する画像を表示する場所が必要なのでcanvasを設置します。

html

<head>
  <script src="./js/face.js">
  <script src="./js/ccv.js">
</head>
<body>
  <canvas id="img-canvas"></canvas>
</body>

JAVASCRIPT

javascriptでの実装は簡単に説明すると、

  1. モザイクをかける写真を読み込む
  2. 顔を検出する(顔の位置情報を取得)
  3. canvasに写真を表示
  4. ひょっとこイラストを読み込む
  5. 顔の位置にひょっとこを表示

という感じです。

javascript

  window.onload = function(){
    //写真の読み込み
    const image = new Image();
    image.src = './images/face.jpg';
    image.onload = function (){
      // 顔の検出
      var face_info = ccv.detect_objects({
        "canvas" : ccv.grayscale(ccv.pre(image)),
        "cascade" : cascade,
        "interval" : 5,
        "min_neighbors" : 1
      });
      // canvasに写真を表示
      const img_canvas = document.getElementById("img-canvas");
      const canvas_2d = img_canvas.getContext("2d");
      img_canvas.width  = image.width;
      img_canvas.height = image.height;
      canvas_2d.drawImage(image, 0, 0);

      // ひょっとこの表示
      const hyottoko = new Image();
      hyottoko.src = './images/hyottoko.png';
      hyottoko.onload = function (){
        for( var i=0; i<face_info.length; i++ ){
          canvas_2d.drawImage(hyottoko, face_info[i].x-20, face_info[i].y-20, face_info[i].width+30, face_info[i].height+30);
        }
      }
      if(face_info.length === 0){
        console.log('ひょっとこにできないよ');
      }
    };
  };

※複数人の顔を検索できるようになっています。

まとめ

ccv.jsとface.jsを使って簡単に顔認証機能を実装してみました。

今回ccv.jsとface.jsを読み込むだけで作成できましたが、顔認証できるライブラリーが色々あるので ご紹介しておきます。

FACE DETECTION

jQueryのライブラリー。今回よりさらに簡単に実装できます。

clmtrackr

骨格や顔のパーツの位置の詳細を検出できます。WebGLを使っているので比較的に処理速度が早いです。

picojs

リアルタイムで顔を検出してくれるライブラリーでわずか200行で書かれています。

試してみてね〜!