如何在跟踪js中进行面部检测后捕获图像 [英] how to capture image after face detection in tracking js
问题描述
我正在使用跟踪js 进行面部检测.我成功检测到人脸，但不知道如何捕获图像帧，我想将检测到的人脸另存为图像.这是我的HTML页面:
I am using tracking js for face detection. I successfully detected the face but I don't know how to capture image frame.I want to save the detected face as image. This is my HTML page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - face with camera</title>
<script src="../tracking.js-master/build/tracking-min.js" type="text/javascript"></script>
<script src="../tracking.js-master/build/data/face-min.js"></script>
<link rel="stylesheet" type="text/css" href="face.css">
</head>
<body>
<div class="demo-frame">
<video id="video" class="face-video" width="740" height="560" preload autoplay loop muted></video>
<canvas id="canvas" class="face-canvas" width="740" height="560"> </canvas>
</div>
<script src="faceDetection.js" type="text/javascript"></script>
</body>
</html>
这是我的 faceDetection.js 文件:
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(6);
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 = '#ff0000';
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);
});
});
};
推荐答案
You could use getUserMedia api and use download attribute on <a> element. It's a bit tricky and it will not be available on all browsers:
首先在画布上绘制视频:
First draw the video on canvas:
tracker.on('track', function(event) {
context.clearRect(0, 0, canvas.width, canvas.height);
event.data.forEach(function(rect) {
context.strokeStyle = '#ff0000';
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);
context.drawImage(video, rect.x, rect.y, rect.width, rect.height, rect.x, rect.y, rect.width, rect.height);
});
});
创建一种触发快照的方法:
Create a method to trigger the snapshot:
var snapshot = function() {
if (localMediaStream) {
document.querySelector('a').href = canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
保留对用户媒体的引用:
Keep a reference to user media:
navigator.getUserMedia({video: true}, function(stream) {
localMediaStream = stream;
}, function(error){console.error(error)});
在此处中查看具有所有代码的粗略演示.单击视频，然后应保存图像(注意:使用最新的Chrome；您可能需要微调坐标；请确保在正确完成检测后单击快照).
See a rough demo with all the code in action here. Click on the video and a image should be saved (Note: Using latest Chrome; You may need to fine tune coordinates; Be sure to click snapshot after detection was done correctly).
这篇关于如何在跟踪js中进行面部检测后捕获图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
