【发布时间】：2022-02-20 18:52:25
【问题描述】：
我是 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;任何帮助都是有价值的，在此先感谢。
以下是我浏览过的可能会有所帮助的资源。 Trying detect faces on image using face-api.js.Getting error: Unhandled Rejection (Error): createCanvasFromMedia -media has not finished loading yet
face-api.js load image file from disk
【问题讨论】：
标签： reactjs p5.js face-api tfjs-node