我正在尝试更改一些使用 js 在实时网络摄像头提要中检测和跟踪面部的代码。原文来源:https ://trackingjs.com/examples/face_camera.html
一旦检测到面部,我将尝试添加一个过滤器,该过滤器将模糊或模糊面部区域或整个画布,但我还没有找到可以解决问题的代码片段或语法。
window.onload = function() {
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var tracker = new tracking.ObjectTracker('face');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);
tracking.track('#video', tracker, { camera: true });
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#a64ceb';
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
context.font = '11px Helvetica';
context.fillStyle = "#fff";
context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
});
});
};
在我看来,我应该添加类似于以下任何一个的内容:
tracking.track.blur(50px, canvas.width, canvas.height, 50px);
或者context.style.webkitFilter = "blur(50px)";
我能想到的唯一其他解决方案是在画布上绘制一个新对象,给它一个模糊和一些透明度,然后让它跟随跟踪器。在如何实现这一点上也处于死胡同。有什么想法吗?当前项目:https ://codepen.io/eremmele/project/editor/XxBGpD/
非常感谢任何可以回答的人。