web前端怎么实现图片选择题特效

这篇文章主要介绍“web前端怎么实现图片选择题特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“web前端怎么实现图片选择题特效”文章能帮助大家解决问题。抽象整体的实现思路如下MediaPipe Face Mesh是一个解决方案，即使在移动设备上也能实时估计468个3D面部地标。它使用机器学习（ML）来推断3D面部表面，只需要一个摄像头输入，而无需专用的深度传感器。该解决方案利用轻量级模型架构以及整个管道中的GPU加速，为实时体验提供了至关重要的实时性能。


import'@mediapipe/face_mesh';
import'@tensorflow/tfjs-core';
import'@tensorflow/tfjs-backend-webgl';
import*asfaceLandmarksDetectionfrom'@tensorflow-models/face-landmarks-detection';

引入tensorflow训练好的人脸特征点检测模型，预测 486 个 3D 人脸特征点，推断出人脸的近似面部几何图形。maxFaces 默认为1。模型将检测到的最大人脸数量。返回的面孔数量可以小于最大值（例如，当输入中没有人脸时）。强烈建议将此值设置为预期的最大人脸数量，否则模型将继续搜索缺失的面孔，这可能会减慢性能。refineLandmarks 默认为false。如果设置为真，则细化眼睛和嘴唇周围的地标坐标，并在虹膜周围输出其他地标。（这里我可以设置false，因为我们没有用到眼部坐标）solutionPath 通往am二进制文件和模型文件所在位置的路径。(强烈建议将模型放到国内的对象存储里面，首次加载可以节省大量时间，大小大概10M)


asynccreateDetector(){
constmodel=faceLandmarksDetection.SupportedModels.MediaPipeFaceMesh;
constdetectorConfig={
maxFaces:1,//检测到的最大面部数量
refineLandmarks:false,//可以完善眼睛和嘴唇周围的地标坐标，并在虹膜周围输出其他地标
runtime:'mediapipe',
solutionPath:'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh',//WASM二进制文件和模型文件所在的路径
};
this.detector=awaitfaceLandmarksDetection.createDetector(model,detectorConfig);
}

返回的面孔列表包含图像中每个面孔的检测面。如果模型无法检测到任何面孔，列表将是空的。
对于每个面，它包含一个检测到的面孔的边界框，以及一个关键点数组。MediaPipeFaceMesh返回468个关键点。每个关键点都包含x和y，以及一个名称。现在，您可以使用探测器来检测人脸。estimateFaces方法接受多种格式的图像和视频，包括：HTMLVideoElement、HTMLImageElement、HTMLCanvasElement和Tensor3D。flipHorizontal 可选。默认为false。当图像数据来自相机时，结果必须水平翻转。


asyncrenderPrediction(){
varvideo=this.$refs['video'];
varcanvas=this.$refs['canvas'];
varcontext=canvas.getContext('2d');
context.clearRect(0,0,canvas.width,canvas.height);
constFaces=awaitthis.detector.estimateFaces(video,{
flipHorizontal:false,//镜像
});
if(Faces.length>0){
this.log(`检测到人脸`);
}else{
this.log(`没有检测到人脸`);
}
}

该框表示图像像素空间中面部的边界框，xMin、xMax表示x-bounds、yMin、yMax表示y-bounds，宽度、高度表示边界框的尺寸。
对于关键点，x和y表示图像像素空间中的实际关键点位置。z表示头部中免费云主机域名心为原点的深度，值越小，键点离相机越近。Z的大小使用与x大致相同的比例。
这个名字为一些关键点提供了一个标签，例如“嘴唇”、“左眼”等。请注意，并非每个关键点都有标签。找到人脸上的两个两个点第一个点 额头中心位置第二个点 下巴中心位置


constplace1=(face.keypoints||[]).find((e,i)=>i===10);//额头位置
constplace2=(face.keypoints||[]).find((e,i)=>i===152);//下巴位置
/*
x1,y1
|
|
|
x2,y2-------|-------x4,y4
x3,y3
*/
const[x1,y1,x2,y2,x3,y3,x4,y4]=[
place1.x,place1.y,
0,place2.y,
place2.x,place2.y,
this.canvas.width,place2.y
];

通过canvas.width 额头中心位置和下巴中心位置计算出 x1,y1,x2,y2,x3,y3,x4,y4


getAngle({x:x1,y:y1},{x:x2,y:y2}){
constdot=x1*x2+y1*y2
constdet=x1*y2-y1*x2
constangle=Math.atan2(det,dot)/Math.PI*180
returnMath.round(angle+360)%360
}
constangle=this.getAngle({
x:x1-x3,
y:y1-y3,
},{
x:x2-x3,
y:y2-y3,
});
console.log('角度',angle)

通过获取角度，通过角度的大小来判断左右摆头。关于“web前端怎么实现图片选择题特效”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: autojs如何实现长按弹窗菜单功能

本篇内容主要讲解“autojs如何实现长按弹窗菜单功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“autojs如何实现长按弹窗菜单功能”吧!由粗到细, 自顶向下的写代码我们现在要修改的文件是showMenuWin…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。