文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-07-05 00:48

关注

这篇文章主要介绍“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 * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';

创建人脸模型

引入tensorflow训练好的人脸特征点检测模型,预测 486 个 3D 人脸特征点,推断出人脸的近似面部几何图形。

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

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

人脸识别

返回的面孔列表包含图像中每个面孔的检测面。如果模型无法检测到任何面孔,列表将是空的。对于每个面,它包含一个检测到的面孔的边界框,以及一个关键点数组。MediaPipeFaceMesh返回468个关键点。每个关键点都包含x和y,以及一个名称。

现在,您可以使用探测器来检测人脸。estimateFaces方法接受多种格式的图像和视频,包括:HTMLVideoElementHTMLImageElementHTMLCanvasElementTensor3D

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

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

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

如何判断

找到人脸上的两个两个点

第一个点 额头中心位置第二个点 下巴中心位置

const place1 = (face.keypoints || []).find((e,i)=>i===10); //额头位置const place2 = (face.keypoints || []).find((e,i)=>i===152); //下巴位置 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

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

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

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

通过获取角度,通过角度的大小来判断左右摆头。

关于“web前端怎么实现图片选择题特效”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯