前端人臉識別--兩張臉相似度

劉翾發表於2019-02-23
前端

本文例子主要寫的是如何獲取兩張臉的相似度, 其餘例子參考官網, 博主才疏學淺, 如果有錯誤, 麻煩大佬們多多指點.

face-api.js 傳送門: github.com/justadudewh…

程式碼傳送門, 安裝即用, 順手點star, 一天好心情, 例子基於face-api.js github.com/TheKiteRunn…

本人csdn地址: blog.csdn.net/c_kite/arti…

1. 效果圖

效果圖

可以clone下我的例子程式碼, 比對參考圖片是images資料夾下的reference.jpg

2. 開發流程

2.1. 安裝face-api.js

獲取face-api.js: npm i face-api.js

如果想要在node端執行, 我作為一個windows使用者遇到了n多坑, 下面貼上一些解決連結:

  1. node-gyp: windows使用者安裝辦法 github.com/nodejs/node…
  2. TensorFlow.js Node.js windows故障排查 github.com/tensorflow/…
  3. 如果遇到 Downloading libtensorflow events.js:173 throw er; // Unhandled 'error' event ^ Error: connect ETIMEDOUT 172.217.160.80:443 網路問題, 需要合理的工具來解決這個問題, 程式碼裡的libtensorflow地址: const BASE_URI = 'storage.googleapis.com/tensorflow/…'; const CPU_DARWIN = 'cpu-darwin-x86_64-1.12.0.tar.gz'; const CPU_LINUX = 'cpu-linux-x86_64-1.12.0.tar.gz'; const GPU_LINUX = 'gpu-linux-x86_64-1.12.0.tar.gz'; const CPU_WINDOWS = 'cpu-windows-x86_64-1.12.0.zip'; const GPU_WINDOWS = 'gpu-windows-x86_64-1.12.0.zip';
  4. 安裝過程如果遇到"node-pre-gyp install --fallback-to-build", 那是canvas包執行的, 會下載一個檔案: github.com/node-gfx/no… 長時間沒反應的話估計是這個包卡主了, 需要合理上網

2.2. 載入model

安裝完包之後, 需要根據你所需要的功能載入適當的model, 人臉檢測一個model, 表情識別一個model, 人臉識別一個model, 如果你沒有提前載入model直接使用api的話會有下面示例程式碼類似提示

Uncaught (in promise) Error: FaceLandmark68Net - load model before inference 
// 這就意味著沒有載入FaceLandmark model
複製程式碼

那麼如何載入model呢, 如下程式碼

await faceapi.loadTinyFaceDetectorModel('model地址')
// 等價於
await faceapi.nets.tinyFaceDetector.load('model地址')
複製程式碼

全部的model可以在倉庫找到: github.com/justadudewh… 你可以把他們放到自己的靜態伺服器裡

2.3. 面部檢測

檢測視訊或者圖片中全部臉

const detections = await faceapi.detectAllFaces(input)
複製程式碼

檢測影象中具有最高置信度分數的面部

const detection = await faceapi.detectSingleFace(input)
複製程式碼

預設情況下，detectAllFaces和detectSingleFace使用SSD Mobilenet V1人臉檢測器。您可以通過傳遞相應的選項物件來指定面部檢測器

// 我測試的時候使用的是`TinyFaceDetector`, 因此可以
const detections = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())
複製程式碼

2.4. 檢測臉部68個標記點

在面部檢測之後，我們還可以預測每個檢測到的面部的面部標誌，如下所示：

const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()
// 或者
const detectionWithLandmarks = await faceapi.detectSingleFace(input).withFaceLandmarks()
複製程式碼

2.5. 計算臉部描述

Note: 一定要按照博文所寫的順序來呼叫函式

在面部檢測和麵部標誌預測之後，可以計算每個面部的面部描述符：

const results = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()
// 或者
const result = await faceapi.detectSingleFace(input).withFaceLandmarks().withFaceDescriptor()
複製程式碼

2.6. 計算兩張臉相似度

要執行面部識別，可以使用faceapi.FaceMatcher將參考面部描述符與查詢面部描述符進行比較

const imgEle = document.createElement('img');
imgEle.src = '/reference.jpg'
const  reference = await faceapi.detectSingleFace(imgEle, options).withFaceLandmarks().withFaceDescriptor()

const result = await faceapi.detectSingleFace(videoEl, options).withFaceLandmarks().withFaceDescriptor()
if (result) {
    const faceMatcher = new faceapi.FaceMatcher(result)
    drawLandmarks(videoEl, $('#overlay').get(0), [result], withBoxes)

    if (reference) {
       const bestMatch = faceMatcher.findBestMatch(reference.descriptor)
       console.log(bestMatch)
     }
}
複製程式碼

此處主要通過臉部特徵向量來計算euclidean distance(歐氏距離), 因此如預覽圖所示_distance越小, 說明兩張臉越匹配, 這個閾值可以設定為0.4, 0.4以下為匹配成功, 以上則失敗.

因此如果你有臉部特層向量, 你也可以通過這個face-api.js api來計算歐式距離

const dist = faceapi.euclideanDistance([0, 0], [0, 10])
console.log(dist) // 10
複製程式碼

tips: euclidean distance(歐氏距離)定義: 是一個通常採用的距離定義,它是在m維空間中兩個點之間的真實距離.在二維空間中的歐氏距離就是兩點之間的直線段距離. 二維空間的歐氏距離公式 d = sqrt(( x1-x2)^2 + (y1-y2)^2 )三維空間的歐氏距離公式d = sqrt( (x1-x2)^2+(y1-y2)^2+(z1-z2)^2 )

相關文章