人脸检测后face-api.js空白画布

问题描述

我想在vue项目中使用face-api.js。我创建了一个简单的vue应用程序，以开始学习库的工作原理，并且代码存在一些问题。

我在HTML代码中输入了一个简单的文件，即可选择一张图片，并让图库识别面部表情的性别和年龄。

<template>
  <div>
    <input type="file" ref="fileInput" @change="detectFacesExpressions()">
    <div ref="canvasContainer" id="canvas-container"></div>
  </div>
</template>

选择图像后，我可以在控制台中看到创建的canvas元素和面部检测对象，但是当我尝试使用库提供的帮助程序调整其大小时，我尝试使用画布上的信息，我将得到一个空白屏幕而不是图像，我在屏幕上仅有的信息是检测到的脸部正方形和标签。

这是我的代码：

<script>
import * as faceapi from 'face-api.js'

export default {
  name: 'Home',data() {
    return {
      file: null
    }
  },// end data
  mounted () {
    console.log(faceapi.nets)
    this.initFaceApi()
  },// end mounted
  methods: {
    async initFaceApi() {
      await faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
      // accordingly for the other models:
      await faceapi.nets.faceLandmark68Net.loadFromUri('/models')
      await faceapi.nets.faceRecognitionNet.loadFromUri('/models')  
      await faceapi.nets.faceExpressionNet.loadFromUri('/models')
      await faceapi.nets.ageGenderNet.loadFromUri('/models')
    },async detectFacesExpressions() {
      // testing API code
      const displayDimensions = { width: 320,height: 400 }
      this.file = this.$refs.fileInput.files
      console.log(this.file)
      
      const img = await faceapi.bufferToImage(this.file[0])
      const canvas = faceapi.createCanvasFromMedia(img,displayDimensions)
      console.log(canvas)
      this.$refs.canvasContainer.append(canvas)  
      
      faceapi.matchDimensions(canvas,displayDimensions)
      
      const detections = await faceapi.detectAllFaces(img)
      .withFaceLandmarks()
      .withFaceDescriptors()
      .withAgeAndGender()
      .withFaceExpressions()

      console.log(detections)
      const resizedDetections = faceapi.resizeResults(detections,displayDimensions)
      
      faceapi.draw.drawDetections(canvas,resizedDetections)
      const minProbability = 0.05
      faceapi.draw.drawFaceExpressions(canvas,resizedDetections,minProbability)

    }
  } // end methods
}
</script>

我该如何解决？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）