title: how to capture image after face detection in tracking js
body: <p>I am using <a href="https://trackingjs.com/" rel="nofollow noreferrer">tracking js</a> 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:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;tracking.js - face with camera&lt;/title&gt;
  
    &lt;script src="../tracking.js-master/build/tracking-min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="../tracking.js-master/build/data/face-min.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="face.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class="demo-frame"&gt;
        &lt;video id="video" class="face-video" width="740" height="560" preload autoplay loop muted&gt;&lt;/video&gt;
        &lt;canvas id="canvas" class="face-canvas" width="740" height="560"&gt;    &lt;/canvas&gt;
    &lt;/div&gt;
  
    &lt;script src="faceDetection.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my <strong>faceDetection.js</strong> file:</p>
  
  <pre><code>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);
      });
    });
  };
  </code></pre>