江苏龙网

  1. 首页 > 资讯 > 科技 > >

[机器学习]前端机器学习：识别人脸，并在脸颊上画草莓( 二 )


(1)安装face-api.js
【[机器学习]前端机器学习：识别人脸，并在脸颊上画草莓】npm i face-api.js (2)加载模型数据
使用face-api.js是不需要我们自己慢慢训练的 ， 可以直接使用models 。
你可以根据应用程序的要求加载你需要的特定模型 。 但是如果要运行一个完整的端到端的示例 ， 我们还需要加载人脸检测、人脸特征点检测和人脸识别模型 。 相关的模型文件可以在代码仓库中找到 。 我们将它们放在public/models文件夹下并导入:
const MODEL_URL = "/models";await faceapi.loadSsdMobilenetv1Model(MODEL_URL);await faceapi.loadFaceLandmarkModel(MODEL_URL);await faceapi.loadFaceRecognitionModel(MODEL_URL); 将face-api.js导入我们的组件：
import * as faceapi from "face-api.js"; (3)使用face-api.js检测人脸图片 ， 获取检测结果
let input = this.$refs.inputImg; // 待检测的图片let canvas = this.$refs.overlay; // 等下画检测结果的画布const minConfidence = 0.8;let fullFaceDescriptions = await faceapi .detectAllFaces(input) .withFaceLandmarks .withFaceDescriptors; // 检测图片faceapi.matchDimensions(canvas, input); // 让画布和图片一样大const displaySize = { width: input.width, height: input.height };const resizedDetections = faceapi.resizeResults( fullFaceDescriptions, displaySize); // 调整检测结果和输入图片像素 3. 计算（草莓位置、大小、倾斜弧度等）
(1)获取脸上元素的特征点数组
// 脸颊是从左往右 17个点const jawOutline = resizedDetections[0].landmarks.getJawOutline; // 鼻子是从上往下画的 9个点const nose = resizedDetections[0].landmarks.getNose; //嘴巴分 20个点const mouth = resizedDetections[0].landmarks.getMouth; //左眼 6个点 从左往右const leftEye = resizedDetections[0].landmarks.getLeftEye;//右眼 6个点 从左往右 const rightEye = resizedDetections[0].landmarks.getRightEye; //左眉毛 5个点 从左往右const leftEyeBbrow = resizedDetections[0].landmarks.getLeftEyeBrow; //右眉毛 5个点 从左往右const rightEyeBrow = resizedDetections[0].landmarks.getRightEyeBrow; faceapi.draw.drawDetections(canvas, resizedDetections); // 画框faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); // 画点 画出来的结果如图：
[机器学习]前端机器学习：识别人脸，并在脸颊上画草莓
本文插图

(2)获取草莓位置
草莓的位置获取 ， 先看下面这张图：
[机器学习]前端机器学习：识别人脸，并在脸颊上画草莓
本文插图

先比较左右黄色和绿色两条线的长度 ， 哪边长就画在哪边（考虑可能照片是侧着脸的） ， 具体的位置左右不一样 ， 右边绿色的线直接从线的中点开始画 ， 而左边黄色的线则是在线的中点再往左边偏移草莓宽度的一半开始画 。
大概如图：
[机器学习]前端机器学习：识别人脸，并在脸颊上画草莓
本文插图

所以是先获取点32和点16的距离 ， 再获取中点：
// 获取两点之间距离const getDistance = (a, b) => { return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))}// 获取两点之间的中点const getMidPoint = (pa, pb) => ({ x: (pa.x + pb.x) / 2, y: (pa.y + pb.y) / 2}) (3)获取草莓大小
草莓的大小可以估计一下 ， 大概是整个脸宽的1/6：
const size = { width: faceWidth / 6, height: faceWidth / 6 }


推荐阅读


上一篇：「独角鲸科技」疫情下的硅谷：苹果总部空了，亚马逊生鲜需三周送达，有企业裁员

下一篇：银行■注意！网贷如果出现以下情况你可能已经被变相收取“砍头息”了！