英文 | https://medium.com/better-programming/add-facial-recognition-to-your-app-easily-with-face-api-js-58df65921e7翻譯 | web前端開發(fā)(web_qdkf)

隨著越來越多的復(fù)雜工具日漸成熟，圖像識(shí)別的受歡迎程度繼續(xù)增長。隨著AI和計(jì)算機(jī)視覺技術(shù)的發(fā)展(事實(shí)上，由于互聯(lián)網(wǎng)，我們現(xiàn)在可以獲得大量數(shù)據(jù))，現(xiàn)在也可以在瀏覽器中進(jìn)行人臉表情識(shí)別。

今天，我想向你介紹face-api.js，這是在TensorFlow.js(為JavaScript創(chuàng)建的流行的機(jī)器學(xué)習(xí)庫)之上實(shí)現(xiàn)的JavaScript人臉識(shí)別庫。

Face-api非常容易使用。它具有強(qiáng)大的API，該API僅公開必要的配置，隱藏了所有底層，例如實(shí)際編寫神經(jīng)網(wǎng)絡(luò)。除了不同的識(shí)別模型外，它還帶有預(yù)建的繪圖功能，因此我們不必弄亂畫布。

在本教程中，我將介紹如何使用它來檢測(cè)圖像上的情緒。實(shí)際上，只是為了向你展示使用face-api.js來實(shí)現(xiàn)它很容易，整個(gè)腳本文件大約有20行。因此，讓我們開始吧。

設(shè)置Face-API

讓我們從索引文件開始。我們需要的只是一個(gè)我們想要處理的圖像。我收集了一些馬克的面部表情不同的圖片。這將是本教程的測(cè)試主題：

除了圖像之外，我們還需要包括face-api庫。你可以直接從GitHub存儲(chǔ)庫中獲取它，也可以npm i face-api.js在控制臺(tái)中運(yùn)行。我還創(chuàng)建了一個(gè)app.js文件，在該文件中我們將與庫的API進(jìn)行交互。 Emotion Decetion With face-api.js body { margin: 0; } canvas { position: absolute; top: 0; left: 0; } 我在根目錄中有圖像，并且還添加了一些次要樣式。我們將把檢測(cè)框繪制到canvas元素上。但是，我們不需要?jiǎng)?chuàng)建canvas標(biāo)簽，因?yàn)槲覀儗哪_本中創(chuàng)建標(biāo)簽。通過給它一個(gè)絕對(duì)位置，它將被放置在圖像的頂部。face-api代替圖像支持其他用于人臉識(shí)別的媒體元素，例如video或canvas. 有了該設(shè)置并準(zhǔn)備好之后，我們就可以開始進(jìn)行腳本的編寫了！

加載模型

我們要做的第一件事就是包含將用于識(shí)別的模型。創(chuàng)建一個(gè)models文件夾，然后從GitHub存儲(chǔ)庫中的weights文件夾下載模型。

我們不會(huì)使用所有這些。你只需要在ssdMobilenetv1，faceLandmark68Net和faceExpressionNet模式及其相應(yīng)的碎片文件一起。從文件中可以看到，該庫還可以猜測(cè)年齡和性別。要從JavaScript加載模型，請(qǐng)?jiān)赼pp.js文件中添加以下內(nèi)容：(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');})();調(diào)用是異步的；因此，我們需要將整個(gè)代碼包裝到異步IIFE中。另外，我們也可以使用諾言，因?yàn)槲覀儚闹蝎@得了待處理的諾言loadFromUri。如果在節(jié)點(diǎn)環(huán)境中使用它，則還可以使用loadFromDisk方法直接從磁盤加載它。

偵測(cè)人臉

接下來，我們將需要獲取圖像并將其用于檢測(cè)和從中創(chuàng)建畫布：(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元素上進(jìn)行交互和繪制的函數(shù)。createCanvasFromMedia將為canvas我們返回一個(gè)元素，可以稍后將其插入dom。檢測(cè)人臉也是異步的，因此我們必須再次使用await。如果圖像中只有一張臉，則可以調(diào)用detectAllFaces或detectSingleFace。?默認(rèn)情況下，這些方法使用SSD Mobilenet V1面部檢測(cè)器。?如果要使用其他模型，可以將其作為第二個(gè)參數(shù)傳遞給方法，如下所示：const detection = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());

繪制檢測(cè)

為了在畫布上繪制檢測(cè)結(jié)果，我們需要定義另外兩個(gè)變量。由于圖像的顯示尺寸和原始尺寸可能會(huì)有所不同，因此我們需要匹配尺寸。否則，盒子的位置將關(guān)閉。(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。然后，我們將畫布添加到主體并繪制檢測(cè)框。如果你100％確定圖片的顯示尺寸和自然尺寸匹配，則可以省略計(jì)算并detection直接傳遞給drawDetections方法，而不用傳遞resizedDimensions。到目前為止，這只是人臉識(shí)別，但是我們沒有與這些障礙相關(guān)的任何情緒。

添加表情和地標(biāo)檢測(cè)

要添加更多檢測(cè)，我們需要再加載兩個(gè)模型：faceLandmark68Net和faceExpressionNet。(async () => { await faceapi.nets.ssdMobilenetv1.loadFromUri('/models'); await faceapi.nets.faceLandmark68Net.loadFromUri('/models'); await faceapi.nets.faceExpressionNet.loadFromUri('/models'); ...})();我們還需要修改我們的價(jià)值detection。我們需要告訴face-api，當(dāng)檢測(cè)到人臉時(shí)，還包括地標(biāo)和表情：(async () => { ... const detection = await faceapi.detectAllFaces(image) .withFaceLandmarks() .withFaceExpressions(); ...})();最后，我們可以將它們繪制到畫布上。一切就緒后，這就是整個(gè)腳本文件：(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);})();

現(xiàn)在我們知道了Mark內(nèi)心的真實(shí)感受。如果你想按原樣獲得項(xiàng)目，請(qǐng)?jiān)L問我為本教程創(chuàng)建的faceapi存儲(chǔ)庫。現(xiàn)在，你可以開始為自己的機(jī)器人添加感官了。祝編碼快樂！

總結(jié)

以上是生活随笔為你收集整理的js 获取鼠标在画布的位置_使用faceapi.js轻松将面部识别添加到你的应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。