英文 | https://medium.com/better-programming/add-facial-recognition-to-your-app-easily-with-face-api-js-58df65921e7

翻译 | web前端开发（web_qdkf)

随着愈来愈多的复杂工具日渐成熟，图像识别的受欢迎程度继续增加。随着AI和计算机视觉技术的发展（事实上，因为互联网，咱们如今能够得到大量数据），如今也能够在浏览器中进行人脸表情识别。javascript

今天，我想向你介绍face-api.js，这是在TensorFlow.js（为JavaScript建立的流行的机器学习库）之上实现的JavaScript人脸识别库。html

Face-api很是容易使用。它具备强大的API，该API仅公开必要的配置，隐藏了全部底层，例如实际编写神经网络。除了不一样的识别模型外，它还带有预建的绘图功能，所以咱们没必要弄乱画布。前端

在本教程中，我将介绍如何使用它来检测图像上的情绪。实际上，只是为了向你展现使用face-api.js来实现它很容易，整个脚本文件大约有20行。所以，让咱们开始吧。java

设置Face-API

让咱们从索引文件开始。咱们须要的只是一个咱们想要处理的图像。我收集了一些马克的面部表情不一样的图片。这将是本教程的测试主题：

除了图像以外，咱们还须要包括face-api库。你能够直接从GitHub存储库中获取它，也能够npm i face-api.js在控制台中运行。我还建立了一个app.js文件，在该文件中咱们将与库的API进行交互。

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Emotion Decetion With face-api.js</title> <style> body { margin: 0; } canvas { position: absolute; top: 0; left: 0; }</style> </head> <body> <img src="emotions.jpg" alt="" /> <script src="face-api.min.js"></script> <script src="app.js"></script> </body></html>

我在根目录中有图像，而且还添加了一些次要样式。咱们将把检测框绘制到canvas元素上。可是，咱们不须要建立canvas标签，由于咱们将从脚本中建立标签。经过给它一个绝对位置，它将被放置在图像的顶部。

face-api代替图像支持其余用于人脸识别的媒体元素，例如video或canvas. 有了该设置并准备好以后，咱们就能够开始进行脚本的编写了！

加载模型

咱们要作的第一件事就是包含将用于识别的模型。建立一个models文件夹，而后从GitHub存储库中的weights文件夹下载模型。

咱们不会使用全部这些。你只须要在ssdMobilenetv1，faceLandmark68Net和faceExpressionNet模式及其相应的碎片文件一块儿。从文件中能够看到，该库还能够猜想年龄和性别。

要从JavaScript加载模型，请在app.js文件中添加如下内容：

(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');})();

调用是异步的；所以，咱们须要将整个代码包装到异步IIFE中。另外，咱们也可使用诺言，由于咱们从中得到了待处理的诺言loadFromUri。若是在节点环境中使用它，则还可使用loadFromDisk方法直接从磁盘加载它。

侦测人脸

接下来，咱们将须要获取图像并将其用于检测和从中建立画布：

(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
 const image = document.querySelector('img'); const canvas = faceapi.createCanvasFromMedia(image); const detection = await faceapi.detectAllFaces(image);})();

Face-api定义了一些用于在canvas元素上进行交互和绘制的函数。createCanvasFromMedia将为canvas咱们返回一个元素，能够稍后将其插入dom。

检测人脸也是异步的，所以咱们必须再次使用await。若是图像中只有一张脸，则能够调用detectAllFaces或detectSingleFace。默认状况下，这些方法使用SSD Mobilenet V1面部检测器。若是要使用其余模型，能够将其做为第二个参数传递给方法，以下所示：

const detection = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());

绘制检测

为了在画布上绘制检测结果，咱们须要定义另外两个变量。因为图像的显示尺寸和原始尺寸可能会有所不一样，所以咱们须要匹配尺寸。不然，盒子的位置将关闭。

(async () => { ... const detection = await faceapi.detectAllFaces(image);
 const dimensions = { width: image.width, height: image.height };
 const resizedDimensions = faceapi.resizeResults(detection, dimensions);
 document.body.append(canvas);
 faceapi.draw.drawDetections(canvas, resizedDimensions);})();

在这里，咱们获得了图像的宽度和高度，并把它传递到resizeResults旁边的detection。而后，咱们将画布添加到主体并绘制检测框。

若是你100％肯定图片的显示尺寸和天然尺寸匹配，则能够省略计算并detection直接传递给drawDetections方法，而不用传递resizedDimensions。

到目前为止，这只是人脸识别，可是咱们没有与这些障碍相关的任何情绪。

添加表情和地标检测

要添加更多检测，咱们须要再加载两个模型：faceLandmark68Net和faceExpressionNet。

(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models'); await faceapi.nets.faceLandmark68Net.loadFromUri('/models'); await faceapi.nets.faceExpressionNet.loadFromUri('/models');
 ...})();

咱们还须要修改咱们的价值detection。咱们须要告诉face-api，当检测到人脸时，还包括地标和表情：

(async () => { ... const detection = await faceapi.detectAllFaces(image) .withFaceLandmarks() .withFaceExpressions();
 ...})();

最后，咱们能够将它们绘制到画布上。一切就绪后，这就是整个脚本文件：

(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models'); await faceapi.nets.faceLandmark68Net.loadFromUri('/models'); await faceapi.nets.faceExpressionNet.loadFromUri('/models');
 const image = document.querySelector('img'); const canvas = faceapi.createCanvasFromMedia(image); const detection = await faceapi.detectAllFaces(image) .withFaceLandmarks() .withFaceExpressions();
 const dimensions = { width: image.width, height: image.height };
 const resizedDimensions = faceapi.resizeResults(detection, dimensions);
 document.body.append(canvas);
 faceapi.draw.drawDetections(canvas, resizedDimensions); faceapi.draw.drawFaceLandmarks(canvas, resizedDimensions); faceapi.draw.drawFaceExpressions(canvas, resizedDimensions);})();

如今咱们知道了Mark心里的真实感觉。若是你想按原样得到项目，请访问我为本教程建立的faceapi存储库。如今，你能够开始为本身的机器人添加感官了。祝编码快乐！

本文分享自微信公众号 - web前端开发（web_qdkf）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。web

使用face-api.js轻松将面部识别添加到你的应用程序

设置Face-API

加载模型

侦测人脸

绘制检测

添加表情和地标检测