英文 | 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

加載模型

偵測人臉

繪製檢測

添加表情和地標檢測