javascriptでの顔認識
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と連携するとおもしろいかもしれませんね。
参考リンク
Face Detection jQuery Plugin
HTML5 Face Detection - JavaScript getUserMedia API and Groucho Marx glasses!
HTML5のFile APIでローカルファイル情報取得してやんよ!!! | ときどきWEB
jQuery本格入門 ?JavaScript開発・デザイン効率化の基礎から Ajax・QUnitまで
- 作者: 沖林正紀
- 出版社/メーカー: 技術評論社
- 発売日: 2012/01/06
- メディア: 大型本
- 購入: 4人 クリック: 24回
- この商品を含むブログを見る