javascriptでの顔認識

f:id:haru-komugi:20140714131154j:plain
javascriptでの顔認識を行います。速度も結構早い感じで、スマートフォンchromeでも結構認識してくれます。

サンプルはこちら
http://moeten.info/js/20140714_faceDetectTest/

認識精度はいまいちですので、適当に顔写真をアップしてみてください。AKBの集合写真などでは認識しやすい感じです。

ソースコードはこちら
index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Face Detection jQuery Plugin</title>
  <meta name="description" content="A jQuery plugin which detects faces in pictures and returns theirs coords. Face Detection is now available as an easy-to-use jQuery Plugin.">
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="lib/jkl-dumper.js"></script>
  <script type="text/javascript" src="facedetect/ccv.js"></script>
  <script type="text/javascript" src="facedetect/face.js"></script>
  <script type="text/javascript" src="facedetect/jquery.facedetection.js"></script>
  <script>
    $(function() {

      //ファイル選択
      /*---------------------------------------------------------------*/
      $("#file").bind("change",function(evt){

        //
        var files = evt.target.files;
        if(files.length == 0) return;
        var file = files[0];
        if(!file.type.match(/image/)) {
          alert('画像ファイルを選んでください');
          return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {

          //画像を設定
          $("#faces").attr({"src":reader.result});
          faceDetact();

        };
        reader.readAsDataURL(file);

      });

      //顔認識
      /*---------------------------------------------------------------*/
      function faceDetact(){

        //顔認識スタート
        var coords = $('img').faceDetection({

          complete:function() {

            //完了

          },
          error:function(img, code, message) {

            //エラー
            alert('Error: '+message);

          }

        });

        //顔部分に描画
        $('#content .face').remove();
        for (var i = 0; i < coords.length; i++) {

            $('<img>', {
              'src' : 'img/cover.png',
              'class':'face',
              'css': {
                'position':	'absolute',
                'left':		coords[i].positionX - coords[i].width/2.3	 +'px',
                'top':		coords[i].positionY - coords[i].height/1.3	 +'px',
                'width': 	coords[i].width *2	+'px',
                'height': 	coords[i].height*1.8	+'px'
              }
            }).appendTo('#content');

        }

        //ログ表示
        //console.log( coords );
        var dumper = new JKL.Dumper();
        $("#result").html( dumper.dump( coords ) );

      }

    });
  </script>
  <style>
    *{
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    body{
      padding: 10px;
      text-align: center;
    }
    h1{
      font-size: 16px;
      margin-bottom: 13px;
    }
    .face {
      border:1px solid red;
    }
    #faces{
      margin-bottom: 13px;
    }
    #file{
      background: #eeeeee; /* Old browsers */
      background: -moz-linear-gradient(top,  #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #eeeeee 0%,#eeeeee 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #eeeeee 0%,#eeeeee 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
      padding: 8px 13px;
      border: 1px solid gray;
      border-radius: 6px;
      margin-bottom: 13px;
    }
    #result{
      font-size: 12px;;
      color: gray;
      border:1px solid #aeaeae;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 13px;
      background: rgb(255, 251, 242);
      text-align: left;
    }
  </style>
</head>
<body>
<h1>顔認識テスト</h1>
<input id="file" type="file" name="img">
<div id="content">
  <img id="faces"/>
</div>
<div id="result"></div>
</body>
</html>

GoogleGlassと連携するとおもしろいかもしれませんね。