/******************************************************************************** SYNCER 〜 知識、感動をみんなと同期(Sync)するブログ * 配布場所 https://syncer.jp/how-to-facial-recognition-by-javascript * 最終更新日時 2015/08/16 12:17 * 作者 あらゆ ** 連絡先 Twitter: https://twitter.com/arayutw Facebook: https://www.facebook.com/arayutw Google+: https://plus.google.com/114918692417332410369/ E-mail: info@syncer.jp ※ バグ、不具合の報告、提案、ご要望など、お待ちしております。 ※ 申し訳ありませんが、ご利用者様、個々の環境における問題はサポートしていません。 ********************************************************************************/ $( function() { // 顔画像のID属性値 var id = 'face-image' ; // 枠線のスタイル var borderStyle = '4px solid #D36015' ; // インスタンスの作成 var img = new Image() ; // 画像の読み込み完了時の処理 img.onload = function() { // プログラムの実行 $( '#' + id ).faceDetection( { // プログラムが完了すると[obj]に顔に関するデータが含まれている complete: function ( obj ) { // 顔を認識できなかった(objにデータがない)場合 if( typeof(obj) == 'undefined' ) { alert( "顔情報を認識できませんでした…。" ) ; return false ; } // 顔を認識できた場合 else { // テキストエリアに表示するためのデータ var object_str = '' ; //人数分だけループ処理する for ( var i=0 ; i' ) ; // 顔範囲の場所を動的に指定 $( '.' + id + '-border' ).eq(i).css( { position: 'absolute' , border: borderStyle , left: ( obj[i].x * obj[i].scaleX ) + ( $( '#' + id ).offset().left - $( '#' + id ).parent().offset().left ) + 'px' , top: ( obj[i].y * obj[i].scaleY ) + ( $( '#' + id ).offset().top - $( '#' + id ).parent().offset().top ) + 'px' , width: obj[i].width * obj[i].scaleX + 'px' , height: obj[i].height * obj[i].scaleY + 'px' } ) ; } // 取得したデータをテキストエリアに表示 $( '#face-data' ).val( object_str ).css( 'height' , ( object_str.split( "\n" ).length+5 ) + 'em' ) ; } } , // プログラムの実行に失敗した時の処理 error: function( code , message ) { // エラーすると原因を示すテキストを取得できるのでアラート表示する alert( 'Error:' + message ) ; } } ) ; } // 画像の読み込み (キャッシュを防ぐため、パラメータを追加) img.src = $( '#' + id ).attr( 'src' ) + '?' + Math.floor( new Date().getTime() / 1000 ) ; } ) ;