如何在跟踪js中进行人脸检测后捕获图像

Question

I am using tracking js for face detection. 我正在使用跟踪js进行面部检测。 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: 这是我的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>

And this is my faceDetection.js file: 这是我的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);
    });
  });
};

Answer 1

You could use getUserMedia api and use download attribute on <a> element. 您可以使用getUserMedia api并在<a>元素上使用download属性。 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)});

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). 单击视频，应保存图像（注意：使用最新的Chrome;您可能需要微调坐标;确保在检测正确完成后单击快照）。

如何在跟踪js中进行人脸检测后捕获图像

问题描述

1 个解决方案

解决方案1
0 2016-11-04 09:56:08

如何在跟踪js中进行人脸检测后捕获图像

问题描述

1 个解决方案

解决方案1 0 2016-11-04 09:56:08

解决方案1
0 2016-11-04 09:56:08