Javascriptで顔認識を実装するjQueryプラグイン jQuery Face Detection の使い方

posts_photo

jQuery Face Detection Plugin

今回はちょっとマニアックな、jQueryを用いた顔認識のプラグインをご紹介します。
普通にサイトを制作している限りはJavascriptで顔認証をする機会ってあまり多くないとは思いますが、ちょっと面白かったので触ってみました。

用意するもの

まずはGitHubからプラグイン一式をダウンロードしましょう。
必要なものはjqueryとjquery.facedetection.min.jsのみになります。ただし、希望通りに使うにはちょっとCSSの調整が必要なのでそれは後ほど記述します。

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.facedetection.min.js"></script>

基本的な使い方

最小限必要なhtml部分は、認識させたい画像のimgタグとそれを囲んだコンテナ、ボタンとして使うタグがあれば良いです。

<!—- こちらのidやclassは全て任意のもので大丈夫です -—>
<div class="picture-container">
<img id="picture" class="picture" src="test.jpg">
</div>

<a id="face_get” href="#">顔認証取得ボタン</a>

さて、メインのJSの記述の前にここでひとつCSSを設定しましょう。
顔認証をかけたいimgを囲んでいるタグに対してposition:relative;をかけます。
これが無くてもプラグイン的にエラーにはなりません。ただプラグインで取得した顔の位置を見た目上にうまく反映させるためにはこちらの指定をしたほうが良いかなと思います。
後ほど記述する認識した顔情報のプロパティの中に利用したx,y座標があるからです。

.picture-container{
  position: relative;
}

さて、最後にJSの記述です。本当に最小限の記述だと以下のようになります。
jQueryで要素を指定し、.faceDetectionを、その中のcompleteに対して、行いたい処理を記述していきます。

$('#picture').faceDetection({
  complete: function (faces) {
  console.log(faces);
}
});

これで顔だと認識される部位の情報は生成できました。
ただ、これを実際に使うとなるとサンプルのようにfor文を用いて取得した顔ひとつ分ごとに対して処理を行っていく必要があります。

$('#picture').faceDetection({
  complete: function (faces) {
    console.log(faces);

    for (var i = 0; i < faces.length; i++) {
    //ここのdivタグの生成は、認識した顔の位置に枠線を出すための処理です。
        $('<div>', {
        'class':'face',
        'css': {
          'position': 'absolute',
          'left': faces[i].x * faces[i].scaleX + 'px',
          'top': faces[i].y * faces[i].scaleY + 'px',
          'width': faces[i].width * faces[i].scaleX + 'px',
          'height': faces[i].height * faces[i].scaleY + 'px'
          }
        })
      .insertAfter(this);
    }
  },
  error:function (code, message) {
    alert('Error: ' + message);
  }
});

取得できる顔認識の情報については、公式GitHubのResultsの項目をご参照ください。
例えば、x,yといった画像上で顔認識の起点がどの座標か、
顔だと定義した領域のwidthやheightなどがあります。

これらの情報をもとに、顔の領域に何かしら画像をかぶせたり、モザイクをかけたりぼかしたり、などの処理を行うことができます。jQeryと単体だけだと、新しいタグを入れて上から重ねるくらいですが、Canvasと組み合わせれば加工の幅が広がる気がします。

”jQuery”タグの他の記事を見る