Javascript 如何在初始化函数之前调用内部的函数,然后阻塞?
我已经为我的react组件构建了一个带有face-api.js的javascript函数,它将返回/控制人脸检测框的宽度和高度。我在少数地方尝试了console.log,直到模型(人脸识别模型)出现为止,它似乎工作正常 但当我为人脸检测器编写异步函数来检测人脸和控制台时。这给了我错误-Javascript 如何在初始化函数之前调用内部的函数,然后阻塞?,javascript,reactjs,react-hooks,face-recognition,face-api,Javascript,Reactjs,React Hooks,Face Recognition,Face Api,我已经为我的react组件构建了一个带有face-api.js的javascript函数,它将返回/控制人脸检测框的宽度和高度。我在少数地方尝试了console.log,直到模型(人脸识别模型)出现为止,它似乎工作正常 但当我为人脸检测器编写异步函数来检测人脸和控制台时。这给了我错误- Unhandled rejection(Reference Error): Cannot access 'handledImage' before initialization 这里是屏幕截图也 我搞不懂,
Unhandled rejection(Reference Error): Cannot access 'handledImage' before initialization
这里是屏幕截图也
我搞不懂,怎么修
这是我的代码faceDetector.js
import * as faceapi from "face-api.js";
//passing image from my react compoenent
const faceDetector = (image) => {
const imageRef = image;
const loadModels = async () => {
// models are present in public and they are getting loaded
const MODEL_URL = process.env.PUBLIC_URL + "/models";
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)
])
// this is rising the issue. I want to call this function after my models loaded so it can detect face
.then(handleImage)
.catch((e) => console.error(e));
};
loadModels();
// this function should detect the face from imageRef and should console the size of detector
const handleImage = async () => {
const detections = await faceapi
.detectSingleFace(imageRef, new faceapi.TinyFaceDetectorOptions())
console.log(`Width ${detections.box._width} and Height ${detections.box._height}`);
}
}
export {faceDetector}
您需要更改函数声明的顺序。在声明变量之前,不能调用
const
变量
//passing image from my react component
const faceDetector = (image) => {
const imageRef = image;
// this function should detect the face from imageRef and should console the size of detector
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 () => {
// models are present in public and they are getting loaded
const MODEL_URL = process.env.PUBLIC_URL + "/models";
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)
])
// this is rising the issue. I want to call this function after my models loaded so it can detect face
.then(handleImage)
.catch((e) => console.error(e));
};
loadModels();
}
您需要更改函数声明的顺序。在声明变量之前,不能调用
const
变量
//passing image from my react component
const faceDetector = (image) => {
const imageRef = image;
// this function should detect the face from imageRef and should console the size of detector
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 () => {
// models are present in public and they are getting loaded
const MODEL_URL = process.env.PUBLIC_URL + "/models";
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)
])
// this is rising the issue. I want to call this function after my models loaded so it can detect face
.then(handleImage)
.catch((e) => console.error(e));
};
loadModels();
}