tracking.js 使得在<img>
. 他们为此提供了一个很棒的 hello world 示例,但我想知道是否有人知道如何检测<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';
};
没发生什么事 :-/