顔認識 face.com API

http://hi0a.com/demo/js-face-com/img/bg-figure.jpg
http://hi0a.com/demo/js-face-com/img/bg-anime.jpg
http://hi0a.com/demo/js-face-com/img/bg-akb.jpg
http://hi0a.com/demo/js-face-com/img/bg-sample.jpg
http://hi0a.com/demo/js-face-com/img/bg-sample-group.jpg

コールバックされたjsonデータを解析して、自由にアプリを作ることができる。

json


  view source
  JavaScript
  // JSONのデータを解析して表示
 function parseJSON(jsData) {
   var resultData = "";

   var photos = jsData.photos;
   var tags = photos[0].tags;
   for (var i in tags) {
     resultData += "<table>";
     resultData += "<caption>【顔" + i + "】</caption>";
     resultData += "<tr><th>ターゲット</th><th>x座標</th><th>y座標</th></tr>";
     resultData += "<tr><td>中央</td><td>" + tags[i].center.x + "</td><td>" + tags[i].center.y + "</td><tr>";
     resultData += "<tr><td>左目</td><td>" + tags[i].eye_left.x + "</td><td>" + tags[i].eye_left.y + "</td><tr>";
     resultData += "<tr><td>右目</td><td>" + tags[i].eye_right.x + "</td><td>" + tags[i].eye_right.y + "</td><tr>";
     resultData += "<tr><td>口の左端</td><td>" + tags[i].mouth_left.x + "</td><td>" + tags[i].mouth_left.y + "</td><tr>";
     resultData += "<tr><td>口の中央</td><td>" + tags[i].mouth_center.x + "</td><td>" + tags[i].mouth_center.y + "</td><tr>";
     resultData += "<tr><td>口の右端</td><td>" + tags[i].mouth_right.x + "</td><td>" + tags[i].mouth_right.y + "</td><tr>";
     resultData += "<tr><td>鼻</td><td>" + tags[i].nose.x + "</td><td>" + tags[i].nose.y + "</td><tr>";
     resultData += "</table>";
   }

   return resultData;
}


$(function(){
    
  function myFunc(urls, data){
    var table_wrap = document.getElementById('table_wrap');
    table_wrap.innerHTML = parseJSON(data);

    var pre_ele = document.getElementById('json');
    pre_ele.innerText = $.dump(data);

    var a = $('#area');

    var photos = data.photos;
    var tags = photos[0].tags;

    var face_url = $('#face').attr('src');



    img.attr('src', urls);
    area.width(photos[0].width).height(photos[0].height).find('div').remove();
    console.log(img_url);
    console.log(area.width() + ':' + area.height());

    for (var i in tags) {
      // 相対座標(%)の場合
      var rect = {
        cx : tags[i].center.x,
        cy : tags[i].center.y,
        w : tags[i].width,
        h : tags[i].height,
      }
      rect.x = rect.cx - rect.w / 2;
      rect.y = rect.cy - rect.h / 2;
      /*
      // 絶対座標(px)の場合
      var rect = {
        cx : photos[i].width * tags[i].center.x /100,
        cy : photos[i].height * tags[i].center.y /100,
        w : photos[i].width * tags[i].width /100,
        h : photos[i].height * tags[i].height /100,
        eye : {
          w : photos[i].width * tags[i].width /100,
          h : photos[i].height * tags[i].height /100,
        }
      }
      rect.x = rect.cx - rect.w /2;
      rect.y = rect.cy - rect.h /2;
      console.dir(rect);
      */

      var face_img = $('<img />').attr('src', face_url);
      var d = $('<div>');
      d.css({
        left   : rect.x + '%',
        top    : rect.y + '%',
        width  : rect.w + '%',
        height : rect.h + '%',
        border: "0px solid #ff0000",
      }).append(face_img);

      var num_ele = $('<div>'); 
      var num = parseInt(i) + 1; 
      rect.nx = rect.x - 2;
      rect.ny = rect.y - 2;
      num_ele.css({
        left   : rect.nx + '%',
        top    : rect.ny + '%',
        width  : '20px',
        height : '20px',
        lineHeight : '20px',
        textAlign: 'center',
        fontSize: '12px',
        fontWeight: 'bold',
        backgroundColor : "#ffffff",
        border: "1px solid #111111",
        borderRadius: "50% 50%",
      }).text(num);

      var eye_l = $('<div>');
      var eye_r = $('<div>');
      eye_l.css({
        left   : tags[i].eye_left.x + '%',
        top    : tags[i].eye_left.y + '%',
        border: "6px solid #ffff00",
        opacity: 0.1,
      });
      eye_r.css({
        left   : tags[i].eye_right.x + '%',
        top    : tags[i].eye_right.y + '%',
        border: "6px solid #ffff00",
        opacity: 0.1,
      });
      a.append(d);
      a.append(eye_l);
      a.append(eye_r);
      a.append(num_ele);
    }
  }

  var area = $('#area');
  var img = $('#photo');
  var face = $('#face');

  var img_url = img.attr('src') || "http://hi0a.com/demo/js-face-com/sample.jpg";

  var api = FaceClientAPI;
  api.init("411f0f4eb6811f9bd0f2a2f5f4c38116");
  api.faces_detect(img_url, myFunc);

  $('#form').submit(function(){
    img_url = $(this).find('input[type="text"]').val();
    api.faces_detect(img_url, myFunc);
    return false;
  });
  
  $('#face_select img').click(function(){
    face_url = $(this).attr('src');
    face.attr('src', face_url);
    area.find('div img').attr('src', face_url);
    return false;
  });
  

  var bg_url = '';
  var bg_input = $('#url');
  $('#bg_select li').click(function(){
    bg_url = $(this).text();
    bg_input.val(bg_url);
    return false;
  });
  
});

  CSS
  #area{
  display:block;
  position:relative;
  left:0px;
  top:0px;
  width:600px;
  height:600px;
}
#area img{
}

#area *{
  display:block;
  position:absolute;
  left:0px;
  top:0px;
}

#face{
	height:120px;
}

#area div img{
  width:120%;
  position:absolute;
  left:-5%;
  top:auto;
  bottom:0;
}


#form input[type="text"]{
	width:360px;
}


#face_select:after{
	content:"";
	display:block;
	clear:both;
}
#face_select li{
	width:120px;
	float:left;
}
#face_select img{
	height:120px;
}


#table_wrap:after{
	content:"";
	display:block;
	clear:both;
}
#table_wrap table{
	width:320px;
	border:1px solid #000000;
	float:left;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-face-com/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。