基于tracking.js的帆布人脸跟踪

Question

tracking.js使得在<img>上检测人脸变得相当容易。他们有一个精彩的你好世界范例，但我想知道是否有人知道如何在<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';
};

什么都没发生-/

Answer 1

我也有过同样的问题。只要改变命令就行。将tracking.track('#canvas', tracker)放在tracker.on -部分后面，它应该可以工作。

但是如果您想在画布上“突出显示”它，您应该在上下文中绘制，而不是绘制。您也可以直接传递imageData tracker.track(imgData, width, height)..。玩得开心。