Javascript 仅捕获检测到的人脸方形

我在网络摄像头中通过JS运行人脸检测模型，它可以识别人脸并正确绘制方框。然后，我如何将检测到的人脸保存为本地计算机的图像

谢谢你的帮助！我卡住了

代码（来自face api.js）如下所示：

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>

俘获

您有一个画布。您可以保存画布：

假设

检测

是一个数组：

//取自https://stackoverflow.com/a/15685544/4088472
函数saveCanvas（canvas）{
const image=canvas.toDataURL（“image/png”）.replace（“image/png”、“image/octet-stream”）；
window.location.href=image；//它将在本地保存
}
// ... 在你的代码中。。。
canvas.getContext（'2d'）.clearRect（0,0，canvas.width，canvas.height）
faceapi.draw.drawDetections（画布、大小检测）
faceapi.draw.drawFaceExpressions（画布、大小检测）
if（检测长度）
保存画布（画布）；

什么是

faceapi

@Marc“”用于在tensorflow.js核心API之上实现的浏览器中人脸检测和人脸识别的JavaScript API“”“添加只是为了确认代码非常感谢您！！！我设法保存了画布，但它只是将其下载为“文件”。不是作为一个图像，我想它与八进制流有关？你可能知道原因吗？再次感谢：）@ParisIo我链接的问题显示了保存画布的所有不同方法，包括重命名画布。不要忘记将答案标记为已接受。