Face++のAPIを使って、PHPで顔認証をする方法

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>