WEB 人臉識別並給照片戴上口罩，極簡版

花間酒發表於2020-03-15
Web

這個春節因為疫情大家幾乎都在家度過，好多人給微信頭像戴口罩。之前就在想可否實現一個簡單都給人臉照片戴口罩都工具，拖了好久終於動手了。非常非常簡單
DEMO
github.com/sparkxxxxxx…

WEB 人臉識別並給照片戴上口罩，極簡版

找了一男一女兩個圖做測試

資料準備

  • react： 以前都是用 vuejs，最近 0 基礎學習 react，練個手吧

  • face-api.js: github 上一個基於 tensorflow.js 帶人臉識別庫。資料如下。為啥識別這種問題不要問，問就是不懂，調庫，幹就完了。 github.com/justadudewh…

  • 透明口罩素材： 百度搜尋就可以了，隨便找一個

開始

  • 引入 face-api.js
import * as faceapi from 'face-api.js';
複製程式碼
  • 初始化
async componentDidMount() {
    await faceapi.nets.ssdMobilenetv1.loadFromUri('/models');
    await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
    await faceapi.nets.faceRecognitionNet.loadFromUri('/models');
}
複製程式碼
  • 獲取上傳圖片，並識別人臉68個特徵點
const inputImgEl = this.refs.refImg;
const fullFaceDescriptions = await faceapi
    .detectAllFaces(inputImgEl as faceapi.TNetInput)
    .withFaceLandmarks()
    .withFaceDescriptors()
複製程式碼

68個特徵點如下，我們選用3，9，15，29四個點

  • 選用後就該畫口罩了 口罩用canvas畫，canvas則需要放到人嘴鼻處，此處用到了上面68個特徵點都資料。

fullFaceDescriptions[0].landmarks.positions positions 是一個68個元素的陣列，對應上面的特徵值編號。最後用3, 9 , 15, 29的點來計算canvas 應該移動的位置就好了。

總結

原理就是如此簡單，簡單到我都沒得可寫了。這個程式碼實現的比較簡單，很多情況其實並未處理，僅供參考和學習。

相關文章