对前端程序员非常友好的人脸检测接口——face-api.js的介绍和demo

简介

Face-api.js 是一个 JavaScript API，基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现。

由于现在前端代码中JS的重要性以及成熟度，我们可以很方便地调用在小型的web项目中，甚至是只有前端的小项目，html+css+js实现人脸检测，而且效率也非常高。
GitHub：https://github.com/justadudewhohacks/face-api.js/

实例

由于本人在做项目时只是需要人脸检测的功能，所以只是调用了该API，关于人脸识别和深度学习的相关知识我也没有深入探究了。

首先，在GitHub上下载完api后的目录中weights中的内容复制到项目目录models中（作为检测用的模型），将face-api.js导入项目后直接调用相关方法。

weights目录内容：

核心代码：

async function faceDetection() {

    // 加载模型
    // 人脸检测模型,上面提到的需要复制内容到models
    await faceapi.nets.ssdMobilenetv1.loadFromUri("models");
    // 人脸地标模型
    await faceapi.nets.faceLandmark68Net.loadFromUri("models");

    // 获取图片实例
    const image = document.getElementById("face");

    // 开始人脸识别，先识别脸，只返回一个最接近的人脸数据
    // 再识别眼、嘴、鼻的位置，使用68个点坐标模型
    // 最后获取脸部描述
    const detection = await faceapi.detectAllFaces(image).withFaceLandmarks();
    // .withFaceDescriptors();
	
	//面部识别框
    const box = document.getElementById("overlay");

    const displaySize = { width: input.width, height: input.height };
    faceapi.matchDimensions(box, displaySize);
    const resizedDetection = faceapi.resizeResults(detection, displaySize);

    faceapi.draw.drawDetections(box, resizedDetection);
    faceapi.draw.drawFaceLandmarks(box, resizedDetection);
}

faceDetection();

检测成功，是不是很简单呢。

基于上述人类检测，我们还可以通过调用其他方法来实现人类识别和表情检测，以及我的项目中实现的刷脸登录，之后我会慢慢分享，今天就到这里吧。