跟踪js中人脸检测后如何捕获图像
how to capture image after face detection in tracking js
我正在使用跟踪js进行人脸检测。我成功地检测到了人脸,但是我不知道如何捕捉图像帧。我想将检测到的人脸保存为图像。这是我的HTML页面:
<!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);
});
});
};
您可以使用getUserMedia api并在<a>
元素上使用download
属性。这有点棘手,并不是在所有浏览器上都可用:
首先在画布上绘制视频:
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);
});
});
创建触发快照的方法:
var snapshot = function() {
if (localMediaStream) {
document.querySelector('a').href = canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
保留对用户媒体的引用:
navigator.getUserMedia({video: true}, function(stream) {
localMediaStream = stream;
}, function(error){console.error(error)});
在这里查看所有代码的粗略演示。点击视频和图像应该保存(注意:使用最新的Chrome;你可能需要微调坐标;
相关文章:
- 如何使用Javascript/Jquery/HTML5函数将HTML页面捕获为图像
- 未捕获的类型错误: 无法读取未定义的属性“图像”
- 正在捕获动态更改其源的图像的加载事件
- 压缩捕获的图像并将其保存到localStorage
- 实际参考和使用HTML5捕获的图像
- 使用JavaScript从网络摄像头捕获图像,而无需页面刷新
- 如果未配置闪存,我该怎么办,那么在自动捕获图像上应该有一些错误消息
- 如何在 iframe 中捕获图像(url)
- 将相机捕获图像转换为 base64 - Ionic
- 捕获图像截断事件
- 是否有任何jquery插件可以像Facebook墙系统中那样从网络摄像头中捕获图像和视频
- 在Visual Basic中从浏览器窗口拖放图像时捕获图像url
- 如何通过用户捕获图像's使用getUserMedia的网络摄像头
- 跟踪js中人脸检测后如何捕获图像
- Html2canvas插件不捕获图像
- 捕获图像元素'onkeyup'事件
- html2canvas.js没有为动态生成的内容捕获图像
- 如何从SWF文件捕获图像
- 在web浏览器中捕获图像
- 使用PHP和JavaScript从网络摄像头捕获图像并保存在文件夹中