PHP

<?php

	// 設定項目
	$params = array(
		'api_key' => '' ,		// APIキー
		'api_secret' => '' ,		// APIシークレット
		'url' => get_current_dir() . 'women.jpg' ,		// 画像のURLアドレス
		'attribute' => 'glass,pose,gender,age,race,smiling' ,		// 取得要素
	) ;

	// リクエストURL
	$request_url = 'https://apius.faceplusplus.com/v2/detection/detect' . '?' . http_build_query( $params ) ;

	//cURLを使ってリクエスト
	$curl = curl_init() ;
	curl_setopt( $curl , CURLOPT_URL , $request_url ) ;
	curl_setopt( $curl , CURLOPT_HEADER, 1 ) ; 
	curl_setopt( $curl , CURLOPT_SSL_VERIFYPEER , false ) ;
	curl_setopt( $curl , CURLOPT_RETURNTRANSFER , true ) ;
	curl_setopt( $curl , CURLOPT_TIMEOUT , 15 ) ;
	$res1 = curl_exec( $curl ) ;
	$res2 = curl_getinfo( $curl ) ;
	curl_close( $curl ) ;

	// 取得したデータを整理
	$json = substr( $res1, $res2['header_size'] ) ;
	$header = substr( $res1, 0, $res2['header_size'] ) ;		// レスポンスヘッダー (検証に利用したい場合にどうぞ)

	// HTML用
	$html = '' ;

	// リクエストしたデータ
	$html .= '<h2>リクエストした画像</h2>' ;
	$html .= '<p><img class="_img" src="' . $params['url'] . '"></p>' ;

	// 取得したデータ
	$html .= '<h2>取得したデータ</h2>' ;
	$html .= '<p>リクエストの結果、下記のデータを取得できました。</p>' ;
	$html .= 	'<h3>JSON</h3>' ;
	$html .= 	'<p><textarea rows="8">' . $json . '</textarea></p>' ;
	$html .= 	'<h3>レスポンスヘッダー</h3>' ;
	$html .= 	'<p><textarea rows="8">' . $header . '</textarea></p>' ;

	// 現在のディレクトリを[http]から取得する関数
	function get_current_dir()
	{
		$ary = explode( '/' , $_SERVER['REQUEST_URI'] ) ;
		$filename = $ary[ ( count( $ary ) - 1 ) ] ;
		return str_replace( $filename , '' , ( !isset($_SERVER['HTTPS']) || empty($_SERVER['HTTPS']) ? 'http://' : 'https://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ) ;
	}

?>

<?php
	// ブラウザに[$html]を出力 (HTMLのヘッダーとフッターを付けましょう)
	echo $html ;
?>
すべて見る

JSON

{
+
"face": [ … 
+
{ … 
+
"attribute": { … 
+
"age": { … 
"range": 10,
"value": 37
},
+
"gender": { … 
"confidence": 63.7538,
"value": "Male"
},
+
"glass": { … 
"confidence": 99.4947,
"value": "None"
},
+
"pose": { … 
+
"pitch_angle": { … 
"value": 0.000171
},
+
"roll_angle": { … 
"value": -6.7773
},
+
"yaw_angle": { … 
"value": -0.001961
}
},
+
"race": { … 
"confidence": 95.5922,
"value": "White"
},
+
"smiling": { … 
"value": 85.687
}
},
"face_id": "43b66e30688f865c7493ce2802077f18",
+
"position": { … 
+
"center": { … 
"x": 19.166667,
"y": 55.137845
},
+
"eye_left": { … 
"x": 14.3913,
"y": 49.976942
},
+
"eye_right": { … 
"x": 23.315,
"y": 48.382206
},
"height": 29.072682,
+
"mouth_left": { … 
"x": 14.9816,
"y": 63.088471
},
+
"mouth_right": { … 
"x": 24.0275,
"y": 62.025313
},
+
"nose": { … 
"x": 19.235167,
"y": 54.676441
},
"width": 19.333333
},
"tag": ""
},
+
{ … 
+
"attribute": { … 
+
"age": { … 
"range": 5,
"value": 12
},
+
"gender": { … 
"confidence": 99.6509,
"value": "Female"
},
+
"glass": { … 
"confidence": 99.9069,
"value": "None"
},
+
"pose": { … 
+
"pitch_angle": { … 
"value": 0.001542
},
+
"roll_angle": { … 
"value": -9.98795
},
+
"yaw_angle": { … 
"value": 27.922053
}
},
+
"race": { … 
"confidence": 99.2528,
"value": "White"
},
+
"smiling": { … 
"value": 86.6312
}
},
"face_id": "3ed5e97937f0a5a6ce09e62fbde61504",
+
"position": { … 
+
"center": { … 
"x": 46.75,
"y": 52.255639
},
+
"eye_left": { … 
"x": 41.967,
"y": 49.105764
},
+
"eye_right": { … 
"x": 48.270833,
"y": 47.436341
},
"height": 21.804511,
+
"mouth_left": { … 
"x": 43.258,
"y": 58.50401
},
+
"mouth_right": { … 
"x": 49.699333,
"y": 57.172682
},
+
"nose": { … 
"x": 47.685333,
"y": 51.54787
},
"width": 14.5
},
"tag": ""
}
],
"img_height": 533,
"img_id": "92f5f4fdb1d7cfc96df188130a495eed",
"img_width": 800,
"session_id": "d2445038c8984840b582b992b521ca05",
"url": "http://syncer.jp/images/DHFgXv5Rfe4d1Lej1lnQfuffZtzsj/post/api/face-detect-01.jpg"
}

JavaScript

function syncerFaceDetect( obj )
{
	// ID
	var id = 'syncer-face-detect' ;

	// 枠線の色
	var color = '#D36015' ;

	// 画像の大きさ
	var img = {
		top: $( '#' + id ).offset().top - $( '#' + id ).parent().offset().top ,
		left: $( '#' + id ).offset().left - $( '#' + id ).parent().offset().left ,
		width: $( '#' + id ).width() ,
		height: $( '#' + id ).height() ,
	} ;

	// 変数の定義
	var data = obj.face , face = [] , attr_id , attr_class_1 = id + '-' , attr_class_2 = id + '-parts-' , position ;

	// 処理
	for( var i in data )
	{
		// エイリアス
		position = data[i].position ;

		// 顔のデータをまとめる
		face = {
			width: img.width * ( position.width / 100 ) ,
			height: img.height * ( position.height / 100 ) ,
			center: {
				x: img.width * ( position.center.x / 100 ) ,
				y: img.height * ( position.center.y / 100 ) ,
			} ,
			eye: {
				left: {
					x: img.width * ( position.eye_left.x / 100 ) ,
					y: img.height * ( position.eye_left.y / 100 ) ,
				},
				right: {
					x: img.width * ( position.eye_right.x / 100 ) ,
					y: img.height * ( position.eye_right.y / 100 ) ,
				}
			},
			mouth: {
				left: {
					x: img.width * ( position.mouth_left.x / 100 ) ,
					y: img.height * ( position.mouth_left.y / 100 ) ,
				},
				right: {
					x: img.width * ( position.mouth_right.x / 100 ) ,
					y: img.height * ( position.mouth_right.y / 100 ) ,
				}
			},
			nose: {
				x: img.width * ( position.nose.x / 100 ) ,
				y: img.height * ( position.nose.y / 100 ) ,
			},
		} ;

		// 各パーツの値をセット
		var parts = [ face.eye.left , face.eye.right , face.mouth.left , face.mouth.right , face.nose ] ;

		// 顔のIDを定義
		attr_id = attr_class_1 + i ;

		// 顔全体に枠線のHTMLを付ける
		$( '#' + id ).after( '<div id="' + attr_id + '"><b>' + ( Number( i ) + 1 ) + '人目</b></div>' ) ;

		// スタイルシートを適用
		$( '#' + attr_id ).css( {
			position: 'absolute' ,
			width: face.width ,
			height: face.height ,
			top: img.top + face.center.y - ( face.height / 2 ) ,
			left: img.left + face.center.x - ( face.width / 2 ) ,
			background: 'rgba( 255,255,255 , .2 )' ,
			border: '3px solid ' + color ,
			color: '#030303' ,
		} ) ;

		// 各パーツの枠線を配置していく
		for( var ii=0 , ll=parts.length ; ll > ii ; ii++ )
		{
			// IDの決定
			attr_id = attr_class_2 + i + '-' + ii ;

			// 枠線のHTMLを追加する
			$( '#' + id ).after( '<div id="' + attr_id + '"></div>' ) ;

			// HTMLにスタイルシートを適用
			$( '#' + attr_id ).css( {
				position: 'absolute' ,
				width: 10 ,
				height: 10 ,
				top: img.top + parts[ ii ].y - 5 ,
				left: img.left + parts[ ii ].x - 5 ,
				background: color ,
			} ) ;
		}
	}

}
すべて見る

HTML

<div style="position:relative; top:0; left:0; overflow:hidden;">
	<img src="" id="syncer-face-detect" width="" height="">
</div>