cómo capturar imágenes después de la detección de rostros en tracking js

Question

Nov 04, 2016, 08:46 AM

javascript face-detection save-image tracking

cómo capturar imágenes después de la detección de rostros en tracking js

estoy usandoseguimiento de js para detección de rostros. Detecté con éxito la cara pero no sé cómo capturar el cuadro de imagen. Quiero guardar la cara detectada como imagen. Esta es mi página 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>

Y este es mifaceDetection.js archivo:

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);
    });
  });
};