如何在跟踪js中进行人脸检测后捕获图像
Posted
技术标签:
【中文标题】如何在跟踪js中进行人脸检测后捕获图像【英文标题】：how to capture image after face detection in tracking js 【发布时间】：2017-03-17 23:43:54 【问题描述】：我正在使用tracking 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" preload autoplay loop muted></video>
<canvas id="canvas" class="face-canvas" > </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);
);
);
;
【问题讨论】：
请花点时间阅读这个 SO 主题：***.com/help/someone-answers 谢谢！ 【参考方案1】：您可以使用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));
查看包含所有实际代码的粗略演示 here。点击视频并保存图片（注意：使用最新的Chrome；您可能需要微调坐标；正确检测后请务必点击快照）。
【讨论】：
嗨，我得到了一个无效的图像。请帮忙以上是关于如何在跟踪js中进行人脸检测后捕获图像的主要内容，如果未能解决你的问题，请参考以下文章
如何避免在 firebase ML Kit 的人脸检测 API 中捕获模糊图像