【JSで顔認識】画像から判定する方法

前回の投稿の続きです。今回は画像から顔認識をします。

キャプチャ方法

映像、画像から顔認識するためには、入力内容をキャプチャする必要があります。
画像を入力の値として使用する場合は、一度canvasに描画し、それを入力対象として使います。
imgタグをstart()メソッドの引数で渡しても、エラーになります。

canvasを用意する

まずはHTMLの準備をします。canvasを２つ用意します。
id="image"は元画像を描画します。
id="overlay"は元画像のcanvasの上にのせ、判定情報を描画します。

// 元画像描画用
<canvas id="image" width="625" height="500"></canvas>

// 顔認識判定結果出力用
<canvas id="overlay" width="625" height="500"></canvas>

画像をcanvasに描画

前回と同じように画像をcanvasに描画します。

var cc = document.getElementById('image').getContext('2d');
var img = new Image();
img.onload = function() {
	cc.drawImage(img,0,0,625, 500);
};
img.src = '画像パス';

判定結果を描画する

判定結果を描画する処理を用意します。

// 判定結果を描画するcanvas
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

// 判定結果描画処理、前回と同じですね。
function drawLoop() {
	drawRequest = requestAnimFrame(drawLoop);
	overlayCC.clearRect(0, 0, 720, 576);
	if (track.getCurrentPosition()) {
		track.draw(overlay);
	}
}

顔認識処理を実行

最後に顔認識処理を実行します。

track.start(document.getElementById('image'), box);
drawLoop();

js部分をまとめておきます。

// canvasを取得
var cc = document.getElementById('image').getContext('2d');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

// ここから画像読み込み処理
var img = new Image();
img.onload = function() {
	// 読み込み完了後に、canvasに描画
	cc.drawImage(img,0,0,625, 500);
	
	// 顔認識実行
	track.start(document.getElementById('image'), box);
	
	// 結果を描画
	drawLoop();
};
img.src = '画像パス'; //読み込み実行


// 判定結果描画処理
function drawLoop() {
	drawRequest = requestAnimFrame(drawLoop);
	overlayCC.clearRect(0, 0, 720, 576);
	if (track.getCurrentPosition()) {
		track.draw(overlay);
	}
}