这篇文章主要介绍“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.w免费云主机、域名idth,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前端怎么实现图片选择题特效”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。
这篇文章主要讲解了“vue中在哪里写接口”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中在哪里写接口”吧! 在Vue中,组件是自包含的模块,可以包含各种数据和处理逻辑。因此,在组件中编写接口请求是一种常用…