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

问题描述：

tracking.js使得在<img>上检测脸部相当容易。他们有这个wonderful hello world example，但我想知道是否有人想出如何检测一个<canvas>元素的脸。通过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.trackCanvas_ = function（element，tracker）{'文件'src/tracker.js'中的第166行 – Blindman67

感谢您的检查！通过您的评论，尽管我意识到他们会将每个图像或视频都推送到特征检测画布中。根据代码，来自“canvas”的图像应该可以正常工作，但我没有得到它的工作。这里有一个基于** hello世界示例**的小提琴，它使用'canvas'而不是'img'。出了什么问题？ https://jsfiddle.net/atv6w3g8/5/ – zaph0t

答

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

但是，如果您想要在画布上“突出显示”，则应在上下文中绘制而不是绘图。您也可以直接通过imageDatatracker.track(imgData, width, height) ...玩得开心。

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

相关推荐