2017-04-13 8 views
0

tracking.jsは、<img>で顔を検出するのがかなり簡単です。彼らにはwonderful hello world exampleがありますが、まだ誰かが<canvas>要素で顔を検出する方法を見つけたのかどうか疑問に思っていました。キャンバスでのトラッキングによる顔のトラッキング

私が試した:

var canvas = document.getElementById('canvas'), 
context = canvas.getContext('2d'), 
img = img = context.getImageData(0, 0, canvas.width, canvas.height); 

var tracker = new tracking.ObjectTracker(['face']); 
tracker.setStepSize(1.7); 

tracking.track('#canvas', tracker); 

tracker.on('track', function(event) { 
    event.data.forEach(function(rect) { 
    window.plot(rect.x, rect.y, rect.width, rect.height); 
    }); 
}); 

window.plot = function(x, y, w, h) { 
    var rect = document.createElement('div'); 
    document.querySelector('#preview').appendChild(rect); 
    rect.classList.add('rect'); 
    rect.style.width = w + 'px'; 
    rect.style.height = h + 'px'; 
    rect.style.left = (img.offsetLeft + x) + 'px'; 
    rect.style.top = (img.offsetTop + y) + 'px'; 
    rect.style.borderColor = '#ff0000'; 
}; 

何も起こりません: -/

+0

ちょうど彼らのソースコードを見てください。ファイル 'src/tracker.js'に' tracking.trackCanvas_ = function(element、tracker){'行166が見つかりました。 – Blindman67

+0

ありがとう!あなたのコメントを通して、私は彼らが特徴検出のためにすべての画像またはビデオをキャンバスにプッシュすることに気づいた。コードによれば、キャンバスからの画像は正常に動作するはずですが、動作させることはできません。ここでは、** hello worldの例**に基づいたフィドルがあります。これは 'img'の代わりに' canvas'を使用しています。何がうまくいかないの? https://jsfiddle.net/atv6w3g8/5/ – zaph0t

答えて

0

を、私は同じ問題を持っていました。順序を変更するだけです。セクションtracker.on - の後ろにtracking.track('#canvas', tracker)を置くとうまくいくはずです。

しかし、キャンバス上で「強調表示」する場合は、プロットする代わりにコンテキストで描画する必要があります。 imageDataを直接tracker.track(imgData, width, height)に渡すこともできます。楽しんでください。

関連する問題