Help us understand the problem. What is going on with this article?

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

More than 5 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);
    }
}
pol-inc
「未来を加速する(Accelerate the Future.)」 それがPOLのミッションです。 課題解決とイノベーションにより、良い未来の到来を早める。私たちにしか創れない良い未来を創る。 私たちがPOLに集まっているのは、このためです。
https://pol.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away