reactjs - ReactJS - Faceapi.js 错误：toNetInput - 预期的媒体类型问题

Question

我是 reactjs 的新手，并构建了一个页面/组件来上传图像并通过 faceapi.js 运行它以显示面部标志点。我试图将这些点放在一个数组中，以便稍后用于其他过程。

网络摄像头版本有效，然后我尝试制作基于照片的版本；但是，一直在努力解决以下问题。

我得到的当前错误：

toNetInput.ts:39 
    
   Uncaught (in promise) Error: toNetInput - expected media to be of type HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | tf.Tensor3D, or to be an element id

我也尝试从 Dom 中的图像元素定义它，但没有奏效。我觉得我错过了一些非常简单但又太盲目的东西......

import React, { useRef , useEffect, useState} from "react";    
import * as faceapi from 'face-api.js'; 

//this one was for previous tests with img html element
import * as inputImage from '../assets/images/sah.png';



function CompName() { 
    loadModels();
    const [file, setFile] = useState([])
    const [canvas, setcanvas] = useState([])

    function fileChangeHandler(event){
      
        setFile(event);
            }
    
    useEffect(() => {
        
       setcanvas(faceapi.createCanvas(file))
        console.log('file 1 ', file.size);
        document.body.append(canvas) 
        if(file.size>0){
        detectF();
        console.log('file ', file);
    }
      }, [file])





     async function loadModels(){
        Promise.all([ 
        await faceapi.nets.tinyFaceDetector.loadFromUri('/models') ,
        await faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
        await faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
        await  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
        await  faceapi.nets.faceExpressionNet.loadFromUri('/models') 
        ]).then((values) => {

            console.log('models loaded');
        });
      } 





    const displaySize = {
        width: file.width,
        height: file.height
      }


    faceapi.matchDimensions(canvas, displaySize)   
 
    async function detectF(){
        const detections = await faceapi.detectAllFaces(file, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks()
        const resizedDetections = faceapi.resizeResults(detections, displaySize)
      
      // faceapi.draw.drawDetections(canvas, resizedDetections)
      faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
      // faceapi.draw.drawFaceExpressions(canvas, resizedDetections)
      const landmarkPositions = resizedDetections[0].landmarks.positions;
 
    console.log({detections});

    }





return (  
    <> 
<div >
<input type="file" onChange={(e) => fileChangeHandler(e.target.files[0])} />
{/* <img src={inputImage} onLoad={handleImageLoad} /> */} 
</>
    );
}

export default CompName;

任何帮助都是有价值的，在此先感谢。

以下是我经历过的可能会有所帮助的来源。尝试使用 face-api.js 检测图像上的人脸。出现错误：未处理的拒绝（错误）：createCanvasFromMedia -media 尚未完成加载

face-api.js 从磁盘加载图像文件

尝试使用 face-api.js 检测图像上的人脸。出现错误：未处理的拒绝（错误）：createCanvasFromMedia -media 尚未完成加载

https://github.com/k3nnet/image_recognition/blob/master/src/app/image-component/image-component.component.ts

https://github.com/justadudewhohacks/face-api.js

https://medium.com/@kkmphele/image-facial-recognition-in-javascript-using-convolutional-neural-networks-with-face-api-js-7ce8a8c7493c