前言
在前端做关于人脸的项目就不得不提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);
};
},
人脸识别.png
表情识别
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);
};
},
表情识别.png
年龄性别识别
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);
});
};
}
年龄性别识别.png
人脸提取
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);
});
};
}
人脸提取.png
上才艺，视频打码
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
最后
以上只是face-api常用的功能，更多的功能及API用法可参考官方文档 。随着人工算法智能算法的优化， face-api.js 等客户端人脸识别库可能会在Web应用中得到更广泛的应用，尤其是在需要快速、简便实现人脸识别功能的场景中。
书洞笔记