首页 > 分享 > 坐稳了整点花活，face

坐稳了整点花活，face

花匠小妙招
2025-04-23 21:59

前言

在前端做关于人脸的项目就不得不提face-api.js，它是一个基于Javascript的开源库，用于在浏览器中进行人脸检测、识别和特征。它是建立在 TensorFlow.js 之上的，利用深度学习模型来实现各种人脸相关的功能。

参考文档

face-api.js库：github.com/justadudewh…

TensorFlow.js ：github.com/tensorflow/…

功能实现

安装依赖

npm i face-api.js 下载模型

模型下载把这个里面的模型下载下来，放在public/modules里就行，

模型加载

async mounted() { // 加载模型用于检测人脸await faceapi.nets.tinyFaceDetector.loadFromUri("/test/modules"); // 加载模型用于检测68个面部关键点 await faceapi.nets.ssdMobilenetv1.loadFromUri("/test/modules"); // 加载面部特征模型 await faceapi.nets.faceLandmark68Net.loadFromUri("/test/modules"); // 加载面部识别模型 await faceapi.nets.faceExpressionNet.loadFromUri("/test/modules"); // 加载年龄性别模型 await faceapi.nets.ageGenderNet.loadFromUri("/test/modules"); await faceapi.nets.faceRecognitionNet.loadFromUri("/test/modules"); } 步骤

第一步：人脸检测detectAllFaces，并且调用想实现的功能，例如withFaceLandmarks是获取人脸的标志点；第二步：调整尺寸matchDimensions；第三步：调整面部检测结果的尺寸resizeResults；第四步：根据不同的功能调用绘制方法; 前置解释

detectAllFaces 是一个方法，用于检测图像中所有的人脸。接收两个参数，第一个参数是要检测的对象，第二个参数是指定人脸检测器，检测器就是上面加载的tiny和ssd两个检测器，tiny是一个轻量级检测器，适用于对性能要求较高的场景。

人脸识别

checkFace() {let canvas = this.$refs.canvasRef;let ctx = canvas.getContext("2d");let img = new Image();img.src = "/test/images/face.jpg";img.onload = async () => {// 人脸检测然后使用withFaceLandmarks方法获取人脸的标志点 let detections = await faceapi .detectAllFaces(img, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks(); // 设置canvas和img的尺寸相同 let displaySize = faceapi.matchDimensions(canvas, img); // 将检测到的面部结果调整为显示大小 let resizeDetections = faceapi.resizeResults(detections, displaySize); ctx.drawImage(img, 0, 0, img.width, img.height); // 在canvas上绘制图像 faceapi.draw.drawDetections(canvas, resizeDetections); faceapi.draw.drawFaceLandmarks(canvas, resizeDetections);}; },

表情识别

faceShiBie() {let canvas = this.$refs.canvasRef;let ctx = canvas.getContext("2d"); let img = new Image(); img.src = "/test/images/face.jpg"; img.onload = async () => { // 使用detectAllFaces人脸检测 // 然后使用withFaceLandmarks方法，对人脸进行特征点检测 // 最后使用withFaceExpressions方法，对人脸表情进行检测 let detections = await faceapi .detectAllFaces(img, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceExpressions(); // 设置canvas和img的尺寸相同 let displaySize = faceapi.matchDimensions(canvas, img); // 将检测到的面部结果调整为显示大小 let resizeDetections = faceapi.resizeResults(detections, displaySize); ctx.drawImage(img, 0, 0, img.width, img.height); // 面框分值 faceapi.draw.drawDetections(canvas, resizeDetections); // 面部表情 faceapi.draw.drawFaceExpressions(canvas, resizeDetections);}; },

年龄性别识别

ageShiBie() {let canvas = this.$refs.canvasRef; let ctx = canvas.getContext("2d"); let img = new Image(); img.src = "/test/images/face.jpg"; img.onload = async () => { // 使用detectAllFaces人脸检测 // 然后使用withFaceLandmarks方法获取人脸的标志点 // 最后使用withAgeAndGender方法，对人脸进行年龄和性别预测 let detections = await faceapi .detectAllFaces(img, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withAgeAndGender(); // 设置canvas和img的尺寸相同 let displaySize = faceapi.matchDimensions(canvas, img); // 将检测到的面部结果调整为显示大小 let resizeDetections = faceapi.resizeResults(detections, displaySize); ctx.drawImage(img, 0, 0, img.width, img.height); // 面框分值 faceapi.draw.drawDetections(canvas, resizeDetections); //年龄和性别 resizeDetections.forEach((detection) => { let { age, gender, genderProbability } = detection; new faceapi.draw.DrawTextField( [ `${Math.round(age)} Age`, , `${gender} (${Math.round(genderProbability)})`, ], detection.detection.box.bottomLeft ).draw(canvas); }); }; }

人脸提取

faceExtraction() {let faceDom = this.$refs.faceListRef;let img = new Image();img.src = "/test/images/face.jpg";img.onload = async () => { // 使用faceapi库中的detectAllFaces方法检测图像中的人脸 let detections = await faceapi.detectAllFaces( img, new faceapi.TinyFaceDetectorOptions() ); // 使用faceapi库中的extractFaces方法提取图像中的人脸 let faceImages = await faceapi.extractFaces(img, detections); // 将提取的人脸图像添加到faceDom中 faceImages.forEach((faceImage) => { faceDom.appendChild(faceImage); });}; }

上才艺，视频打码

startMask() {let video = this.$refs.videoRef;video.play();let canvas = this.$refs.canvasRef;let ctx = canvas.getContext("2d");video.addEventListener("play", async () => {const displaySize = { width: 150, //因为视频不是全屏的，所以需要手动设置一下canvas的宽高，没有使用video的宽 height: video.height, }; // 设置canvas的尺寸与显示尺寸相同 faceapi.matchDimensions(canvas, displaySize); let img = new Image(); img.src = "/test/mark.png"; img.onload = () => { setInterval(async () => { // 使用faceapi库中的detectAllFaces方法检测视频中的所有人脸 const detections = await faceapi.detectAllFaces( video, new faceapi.TinyFaceDetectorOptions() ); // 使用faceapi库中的resizeResults方法将检测到的人脸结果调整为指定大小 const resizeDetections = faceapi.resizeResults( detections, displaySize ); // 绘制视频 ctx.drawImage(video, 0, 0, displaySize.width, displaySize.height); // 遍历检测到的物体 resizeDetections.forEach((item) => { // 绘制物体 ctx.drawImage( img, item.box.x, item.box.y, item.box.width, item.box.height ); }); }, 100); };}); }

视频打码.gif