如何在反应中借助 tensorflowjs 将蒙版应用于地标

问题描述

我在 tensorflow.js 的帮助下实现了人脸地标检测，现在我们能够检测人脸，但是在 tensorlfowjs 和 reactjs 的帮助下首先我们要访问相机，然后用户需要允许该相机完成，但是 之后，我们将使用手部运动检测用户的手势，然后我们将 根据我们当前的代码库，根据用户的手势将蒙版应用到用户的面部

App.js

import React,{ useRef,useEffect } from "react";
import "./App.css";
import * as tf from "@tensorflow/tfjs";

import * as facemesh from "@tensorflow-models/face-landmarks-detection";
import Webcam from "react-webcam";
import { drawMesh } from "./utilities";


  //setup references
  function App() {
    const webcamRef = useRef(null);
    const canvasRef = useRef(null);

    //  Load posenet
    const runFacemesh = async () => {
      // OLD MODEL
      // const net = await facemesh.load({
      //   inputResolution: { width: 640,height: 480 },//   scale: 0.8,// });
      const net = await facemesh.load(facemesh.SupportedPackages.mediapipeFacemesh);
      setInterval(() => {
        detect(net);
      },10);
    };
  
    const detect = async (net) => {
      if (
        typeof webcamRef.current !== "undefined" &&
        webcamRef.current !== null &&
        webcamRef.current.video.readyState === 4
      ) {
        // Get Video Properties
        const video = webcamRef.current.video;
        const videoWidth = webcamRef.current.video.videoWidth;
        const videoHeight = webcamRef.current.video.videoHeight;
  
        // Set video width
        webcamRef.current.video.width = videoWidth;
        webcamRef.current.video.height = videoHeight;
  
        // Set canvas width
        canvasRef.current.width = videoWidth;
        canvasRef.current.height = videoHeight;
  
        // Make Detections
        // OLD MODEL
        // NEW MODEL
        const face = await net.estimateFaces({input:video});
        console.log(face);
  
        // Get canvas context
        const ctx = canvasRef.current.getContext("2d");
        requestAnimationFrame(()=>{drawMesh(face,ctx)});
      }
    };
  
    useEffect(()=>{runFacemesh()},[]);
  
    return (
      <div className="App">
        <header className="App-header">
          <Webcam
            ref={webcamRef}
            style={{
              position: "absolute",marginLeft: "auto",marginRight: "auto",left: 0,right: 0,textAlign: "center",zindex: 9,width: 640,height: 480,}}
          />
  
          <canvas
            ref={canvasRef}
            style={{
              position: "absolute",}}
          />
        </header>
      </div>
    );
  }
  
  export default App;

utilies.js

export const TRIANGULATION = [
    127,34,139,11,37,232,231,120,72,39,128,121,47,104,69,67,175,171,148,157,154,155,118,50,101,73,40,9,151,108,48,115,131,194,204,211,74,185,80,42,183,92,186,230,there more trianles ratios outthere
];
  
  // Triangle drawing method
  
  const drawPath = (ctx,points,closePath) => {
    const region = new Path2D();
    region.moveto(points[0][0],points[0][1]);
    for (let i = 1; i < points.length; i++) {
      const point = points[i];
      region.lineto(point[0],point[1]);
    }
  
    if (closePath) {
      region.closePath();
    }
    ctx.strokeStyle = "yellow";
    ctx.stroke(region);
  };
  
  // Drawing Mesh
  export const drawMesh = (predictions,ctx) => {
    if (predictions.length > 0) {
      predictions.forEach((prediction) => {
        const keypoints = prediction.scaledMesh;
  
        //  Draw Triangles
        for (let i = 0; i < TRIANGULATION.length / 3; i++) {
          // Get sets of three keypoints for the triangle
          const points = [
            TRIANGULATION[i * 3],TRIANGULATION[i * 3 + 1],TRIANGULATION[i * 3 + 2],].map((index) => keypoints[index]);
          //  Draw triangle
          drawPath(ctx,true);
        }
  
        // Draw Dots
        for (let i = 0; i < keypoints.length; i++) {
          const x = keypoints[i][0];
          const y = keypoints[i][1];
  
          ctx.beginPath();
          ctx.arc(x,y,1 /* radius */,3 * Math.PI);
          ctx.fillStyle = "aqua";
          ctx.fill();
        }
      });
    }
  };

任何人都可以帮助我们如何将蒙版应用到脸上，而且我们已经有了手势和其他东西

解决方法

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

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

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