0

我正在开发一个人脸检测应用程序，因为我需要收集用户图像以供以后检测它们。我已成功将图像上传到 MySQL 数据库中。现在我需要将图像上传到公共文件夹中以响应检测图像camera.i 卡在 react public 文件夹中上传图像。帮我摆脱这个问题..

这是要在 imgUrl 变量中检测图像的 React 代码

detect = async () => {
    const videoTag = document.getElementById("videoTag");
    const canvas = document.getElementById("myCanvas");
    const displaySize = { width: videoTag.width, height: videoTag.height };
    faceapi.matchDimensions(canvas, displaySize);
    //setInterval starts here for continuous detection
    time = setInterval(async () => {
        let fullFaceDescriptions = await faceapi
            .detectAllFaces(videoTag)
            .withFaceLandmarks()
            .withFaceExpressions()
            .withFaceDescriptors();

        const value = fullFaceDescriptions.length;
        this.setState({ detection: value });
        fullFaceDescriptions = faceapi.resizeResults(
            fullFaceDescriptions,
            displaySize
        );
        canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
        //Label Images
        var dummy = ["praveen", "vikranth", "Gokul", "Rahul"];
        const labels = nameArray1;
        // const labels = ["praveen", "vikranth", "Gokul", "Rahul"];
        if (no_of_times <= 0) {
            if (no_of_times === 0) {
                labeledFaceDescriptors = await Promise.all(
                    labels.map(async (label) => {
                        // fetch image data from urls and convert blob to HTMLImage element
                        const imgUrl = `/img/${label}.png`; // for testing purpose
                        // const imgUrl = testImage;
                        const img = await faceapi.fetchImage(imgUrl);
                        const fullFaceDescription = await faceapi
                            .detectSingleFace(img)
                            .withFaceLandmarks()
                            .withFaceExpressions()
                            .withFaceDescriptor();
                        if (!fullFaceDescription) {
                            throw new Error(`no faces detected for ${label}`);
                        }

                        const faceDescriptors = [fullFaceDescription.descriptor];
                        return new faceapi.LabeledFaceDescriptors(label, faceDescriptors);
                    })
                );
                // console.log(no_of_times);
            }
        }

        const maxDescriptorDistance = 0.7;
        no_of_times++;
        const faceMatcher = new faceapi.FaceMatcher(
            labeledFaceDescriptors,
            maxDescriptorDistance
        );

        const results = fullFaceDescriptions.map((fd) =>
            faceMatcher.findBestMatch(fd.descriptor)
        );
        result = [];
        results.forEach((bestMatch, i) => {
            const box = fullFaceDescriptions[i].detection.box;
            // console.log(box)
            const text = bestMatch.toString(); //this for basMatch name detection
            var str = "";
            //This is for removing names confidence to map value without duplicate
            var val = text.replace(/[0-9]/g, "");
            for (let i of val) {
                if (i !== " ") {
                    str += i;
                } else {
                    break;
                }
            }
            if (result.includes(str) === false) result.push(str);

            const drawBox = new faceapi.draw.DrawBox(box, { label: text });

            drawBox.draw(canvas);
            faceapi.draw.drawFaceExpressions(canvas, fullFaceDescriptions, 0.85);
        });

        for (let i = 0; i < fullFaceDescriptions.length; i++) {
            const result1 = fullFaceDescriptions[i].expressions.asSortedArray()[i];
            // console.log(result[i]);
            // console.log(result1.expression);
            this.test(result[i], result1.expression);
        }
    }, 100);

在上面的代码中，我手动将图像放在公共文件夹中，这需要在用户上传图像时动态完成。

这是我从nodejs获取base64图像的地方

axios.get("/image").then((res) => {
        testImage = res.data;
        // console.log("from image" + res.data);
        imgback = <img src={`data:image/jpeg;base64,${res.data}`} />;
    });

这是来自 reactjs 的 get 请求的 nodejs 代码

app.get("/image", (req, res) => {

connection.query("SELECT * FROM images", (error, row, fields) => {
    if (!!error) {
        console.log("Error in the query");
    } else {
        console.log("successful query");

        var buffer = new Buffer(row[0].image, "binary");
        var bufferBase64 = buffer.toString("base64");

        res.send(bufferBase64);

    }
});

});

我的目标是，在反应代码中的 imgUrl 变量中，我需要指定图像文件夹，我需要在文件夹中动态添加图像。或者有没有其他方法可以直接给imgUrl变量中的图像数组。请帮我解决这个问题。

4

0 回答 0