Capture Detected Face Square Only JS

Question

I'm running a face detection model via JS in the webcam, it recognises the face and draws the box correctly. How can I then go about saving the detected face only as an image locally to my computer?

Im grateful for any help! Im stuck!

The code (from face-api.js) is as follows:

JavaScript

const video = document.getElementById('video')
const snap = document.getElementById('snap')
const canvas = document.getElementById('canvas')



Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/static/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/static/models')
]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}



video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceExpressions()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
  }, 100)
})

HTML

<div id="cam">
    <video id="video" width="720" height="560" autoplay muted></video>
</div>
<div class="control">
    <button id="snap" class="btn btn-primary">Capture</button>
</div>
<canvas id="canvas" width="197" height="197"></canvas>

@Marc """"JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API""" added just to acknowledge the code — ParisIo, Mar 26 '21 at 19:31

Slava Knyazev · Accepted Answer · 2021-03-26T19:42:57.657

1

You have a canvas. You can save a canvas: How To Save Canvas As An Image With canvas.toDataURL()?

Assuming detections is an array:

// Taken from https://stackoverflow.com/a/15685544/4088472
function saveCanvas(canvas) {
  const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
  window.location.href=image; // it will save locally
}


// ... in your code ...
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
faceapi.draw.drawDetections(canvas, resizedDetections)
faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
if (detections.length)
   saveCanvas(canvas);

edited Mar 26 '21 at 19:42

answered Mar 26 '21 at 19:33

Slava Knyazev

5,377
1
22
43

Thank you very much for this!!! I managed to save the canvas but it just downloads it as 'File'. Not as an image I assume it has something to do with the octet-stream? Could you possibly know the reason? Thanks again :) – ParisIo Mar 26 '21 at 19:44
@ParisIo The question I linked shows all the different ways to save your canvas, including renaming it. Don't forget mark answers as accepted. – Slava Knyazev Mar 26 '21 at 19:48

Capture Detected Face Square Only JS

1 Answers1