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

【问题标题】：Face tracking on canvas via tracking.js通过 tracking.js 在画布上进行人脸跟踪
【发布时间】：2017-09-10 04:08:40
【问题描述】：

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

什么都没有发生：-/

【问题讨论】：

看看他们的源代码。我在文件src/tracker.js中找到tracking.trackCanvas_ = function(element, tracker) {第166行
感谢您的检查！通过您的评论，尽管我意识到他们将每个图像或视频都推送到画布中以进行特征检测。根据代码，来自canvas 的图像应该可以正常工作，但我无法正常工作。这是一个基于 hello world 示例 的小提琴，使用 canvas 而不是 img。怎么了？ jsfiddle.net/atv6w3g8/5

标签： javascript canvas face-recognition tracking.js

【解决方案1】：

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

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

【讨论】：