书洞笔记

外观

face-api人脸识别

1217字约4分钟

人脸识别人工智能机器学习

2024-11-22

前言

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

参考文档

  • face-api.js库：https://github.com/justadudewhohacks/face-api.js

  • TensorFlow.js ：https://github.com/tensorflow/tfjs-core

功能实现

  • 安装依赖
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);
        };
	});
}

视频打码

最后

以上只是face-api常用的功能，更多的功能及API用法可参考官方文档 。随着人工算法智能算法的优化， face-api.js 等客户端人脸识别库可能会在Web应用中得到更广泛的应用，尤其是在需要快速、简便实现人脸识别功能的场景中。