react，如何在 react 中使用 face-api 作为普通的 javascript 函数来检测照片中的人脸？

问题描述

我正在做一个 React 项目。我的组件将使用图像参数调用 JavaScript 函数（在另一个文件中定义），然后我的包含 face-api.js 代码的 Javascript 函数将从图像中确定人脸并控制人脸检测框尺寸的结果。

首先我在它工作的反应组件中尝试了它。但是现在我正在尝试将它作为我的其他 React 项目的普通 JavaScript 模块，但它给了我错误

这是使用 face-api 进行人脸检测的 react 组件

FaceRecognition.js

import React,{ useState,useEffect,useRef } from "react";
import * as faceapi from "face-api.js";
import Img from "../assets/mFace.jpg";
import './App.css';

const PhotoFaceDetection = () => {
  const [initializing,setinitializing] = useState(false);
  const [image,setimage] = useState(Img);
  const canvasRef = useRef();
  const imageRef = useRef();

  useEffect(() => {
    const loadModels = async () => {
      const MODEL_URL = process.env.PUBLIC_URL + "/models";
      setinitializing(true);
      Promise.all([
        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
      ])
        .then(console.log("success",MODEL_URL)).then(handleImageClick)
        .catch((e) => console.error(e));
    };
    loadModels();
  },[]);

  const handleImageClick = async () => {
    
      if (initializing) {
        setinitializing(false);
      }
      canvasRef.current.innerHTML = faceapi.createCanvasFromMedia(
        imageRef.current
      );
      const displaySize = {
        width: 500,height: 350
      };
      faceapi.matchDimensions(canvasRef.current,displaySize);
      const detections = await faceapi
        .detectSingleFace(imageRef.current,new faceapi.TinyFaceDetectorOptions())
       
      const resizeDetections = faceapi.resizeResults(detections,displaySize);
      canvasRef.current
        .getContext("2d")
        .clearRect(0,displaySize.width,displaySize.height);
      faceapi.draw.drawDetections(canvasRef.current,resizeDetections);
      console.log(`Width ${detections.Box._width} and Height ${detections.Box._height}`);
    
  };

  return (
    <div className="App">
      <span>{initializing ? "Initializing" : "Ready"}</span>
      <div className="display-flex justify-content-center">
        <img ref={imageRef} src={image} alt="face" />
        <canvas ref={canvasRef} className="position-absolute" />
      </div>
    </div>
  );
};

export default PhotoFaceDetection;

不工作引发错误：下面是我试图从上面的组件实现的纯 JavaScript 函数。

import * as faceapi from "face-api.js";

const faceDetector = (image) => {
    const imageRef = image;


    const handleImage = async () => {
        const detections = await faceapi
            .detectSingleFace(imageRef,new faceapi.TinyFaceDetectorOptions())
        console.log(`Width ${detections.Box._width} and Height ${detections.Box._height}`);
    }

    const loadModels = async () => {
        const MODEL_URL = process.env.PUBLIC_URL + "/models";
        Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
        ])
            .then(handleImage)
            .catch((e) => console.error(e));
    };
    loadModels();


}



export {faceDetector}

这是我得到的错误的屏幕截图。

解决方法

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

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

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