Javascript 通过tracking.js在画布上进行人脸跟踪

Javascript 通过tracking.js在画布上进行人脸跟踪,javascript,canvas,face-recognition,tracking.js,Javascript,Canvas,Face Recognition,Tracking.js,tracking.js使在上检测人脸变得相当容易。他们对此有自己的想法,但我想知道是否有人知道如何在元素上检测人脸 我试过: var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'), img = img = context.getImageData(0, 0, canvas.width, canvas.height); var tracker = new tracking.ObjectT

tracking.js使在
上检测人脸变得相当容易。他们对此有自己的想法,但我想知道是否有人知道如何在
元素上检测人脸

我试过:

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';
};

什么也没发生:-/

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


但是如果你想在画布上“突出”它,你应该在上下文中绘制,而不是打印。您还可以直接传递
imageData
跟踪器.track(imgData,width,height)
。。。玩得开心

只要看看他们的源代码。我找到了
tracking.trackCanvas}=function(元素,跟踪器){
文件
src/tracker.js
中的第166行感谢您的检查!通过您的评论,我意识到他们将每个图像或视频都推到画布中进行特征检测。根据代码,来自
画布的图像应该可以正常工作,但我无法正常工作。下面是一个基于hello world示例的提琴使用
canvas
而不是
img
。出了什么问题?