如何解决如何在反应中借助 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 举报,一经查实,本站将立刻删除。