Edited at

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

More than 3 years have passed since last update.

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


キャプチャ方法

映像、画像から顔認識するためには、入力内容をキャプチャする必要があります。

画像を入力の値として使用する場合は、一度canvasに描画し、それを入力対象として使います。

imgタグをstart()メソッドの引数で渡しても、エラーになります。


canvasを用意する

まずはHTMLの準備をします。canvasを2つ用意します。

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);
}
}