LoginSignup
18

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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

キャプチャ方法

映像、画像から顔認識するためには、入力内容をキャプチャする必要があります。
画像を入力の値として使用する場合は、一度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);
    }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
18