上次送女神死亡芭比粉口紅後，我痛定思痛

時間 2020-02-15

標籤上次芭比口紅痛定思痛简体版

原文原文鏈接

Git項目源碼：https://github.com/DaMaiGit/a...javascript

花絮

今天是一年一度的情人節。都說女生的梳妝檯上永遠缺一支口紅，在這個時候，給心儀的女神送一支適合她的口紅，表達本身的想念之情準沒錯。想到女神收到口紅後欣喜的樣子，還真有點小激動呢！前端

做爲技術直男，怎樣挑選色號才能不出錯呢？上次送女神死亡芭比粉的翻車經歷還歷歷在目。爲此，在這段宅家的日子裏，小編痛定思痛，製做出了一款口紅分析神器：計算機根據女神的照片，自動識別其脣色，從而幫她挑選與脣色最匹配的口紅色號。java

有了這個神器，咱們就能憑藉珍藏的女神美照，輕鬆分析出她們所匹配的口紅款式，進而投其所好，今後沐浴在愛情的春風裏！git

開始動工

口紅分析神器的製做步驟主要有：github

識別照片中嘴脣部分的顏色；
對比口紅顏色，篩選出適合的口紅款式。

識別照片中嘴脣顏色

首先咱們應該讓機器準確識別出照片中嘴脣的位置。Google的AI框架TensorFlow能夠幫助開發者搭建訓練機器學習的模型。npm

Google的AI框架TensorFlow可以幫助開發者搭建訓練機器學習的模型。json

對於入門者而言，本身使用TensorFlow去訓練模型不是一蹴而就的，這裏面涉及到不少深度學習以及TensorFlow的基本概念，例如張量、隱藏層、激活函數、卷積層、池化層等。canvas

好在深度學習的應用並不難，justadudewhohacks大神的人臉識別模型框架face-api能夠幫咱們忙。構建於TensorFlow.js核心庫之上，face-api是基於MobileNetV1的神經網絡所進行的人臉樣本訓練。藉助它，咱們可以使程序快速得到人臉識別的能力。api

<center>
<img src="https://user-gold-cdn.xitu.io/2020/2/14/17041dbe18c1b3c2?w=440&h=431&f=jpeg&s=18379" alt="2" style="zoom:50%;" />
</center>數組

好在深度學習的應用並不困難，這讓我想起了justadudewhohacks大神的人臉識別模型框架:face-api。face-api本質上是構建於TensorFlow.js核心庫之上，基於MobileNetV1的神經網絡進行人臉樣本的訓練。總而言之，藉助它，咱們可以快速使咱們的程序得到人臉識別的能力。

深度學習的原理

深度學習指的是經過深度神經網絡訓練機器，使其得到與人類類似的學習與分析能力，進而完成識別文字、圖像和語音的任務。

深度學習主要包括如下三個步驟：

構建深度神經網絡；
輸入數據樣本，得到模型並評估效果；
優化模型並輸出。

face-api已經實現了上述三個步驟，爲開發者提供了人臉識別的模型，並封裝成了簡易的api，使咱們能在前端項目上更方便地使用人臉識別技術。如圖所示，藍色部分是face-api已經完成的任務，而咱們要作的則是輸入人臉圖片到已經訓練好的模型中，獲得輸出值便可，即橙色框內的部分。

face-api的使用

引入方式

方式1:

若是咱們不使用打包工具的話，能夠直接將github庫中的dist目錄下的腳本face-api.js直接導入

<script src="face-api.js"></script>

方式2:

使用npm來引入face-api庫；

npm i face-api.js

初始化模型

藉助不一樣的卷積神經網絡，face-api提供了一系列模型。經常使用的模型以下所示：

var nets = {
    ssdMobilenetv1: new SsdMobilenetv1(), // ssdMobilenetv1 目標檢測
    tinyFaceDetector: new TinyFaceDetector(),  // 人臉識別（精簡版）
    tinyYolov2: new TinyYolov2(),   // Yolov2 目標檢測（精簡版）
    mtcnn: new Mtcnn(),   // MTCNN
    faceLandmark68Net: new FaceLandmark68Net(),  // 面部 68 點特徵識別
    faceLandmark68TinyNet: new FaceLandmark68TinyNet(), // 面部 68 點特徵識別（精簡版）
    faceRecognitionNet: new FaceRecognitionNet(),  // 面部識別
    faceExpressionNet: new FaceExpressionNet(),  //  表情識別
    ageGenderNet: new AgeGenderNet()  // 年齡識別
};

face-api 工程的weights目錄下放置了模型文件，咱們只須要將weights所有拷貝到工程目錄中便可。

經過faceapi.net你們能夠加載對應的模型：

faceApi.nets.ssdMobilenetv1.load('/weights') //加載ssdMobilenetv1 目標檢測模型
faceApi.nets.faceLandmark68Net.load('/weights')//加載面部 68 點特徵識別模型

在口紅分析神器中，咱們僅須要加載ssdMobilenetv1和faceLandmark68Net模型便可。

加載完成後，你們能夠調用faceApi.detectSingleFace(input)來識別單我的臉或使用faceapi.detectAllFaces(input)來識別多張人臉。

const detections1 = await faceapi.detectSingleFace(input) //return FaceDetection | undefined
const detections2 = await faceapi.detectAllFaces(input) //return Array<FaceDetection>

其中，對象FaceDetection返回了人臉識別的相關信息，如置信度、人臉邊框等：

{
    "_imageDims": {
        "_width": 225,
        "_height": 225
    },
    "_score": 0.9931827187538147,
    "_classScore": 0.9931827187538147,
    "_className": "",
    "_box": {
        "_x": 75.58209523558617,
        "_y": 12.725257873535156,
        "_width": 86.51270046830177,
        "_height": 99.15830343961716
    }
  ....
}

僅靠FaceDetection返回的對象還沒法知足需求，咱們能夠調用鏈式，返回人臉的68個特徵點信息：

{
  detection: FaceDetection, 
  landmarks: FaceLandmarks68
}

其中，landmarks對象涵蓋了人臉的68個特徵點信息，你們能夠經過如下代碼查看效果：

let canvas = faceApi.createCanvasFromMedia(image)
faceApi.draw.drawFaceLandmarks(canvas,landmarks.landmarks) //繪畫68個特徵點
canvas.toBlob(function(blob){
    console.log(URL.createObjectURL(blob))
})

<center>
<img src="https://user-gold-cdn.xitu.io/2020/2/14/17041dd723a2ce00?w=1210&h=1250&f=png&s=2036527" alt="7" style="zoom:40%;" />
</center>
不難發現，模型根據68個特徵點標記了人臉的五官位置。你們能夠藉助FaceLandmarks68.positions得到Array(68)的數組，這些數組元素即是68個特徵點。具體的點位的分佈以下：

`
此外，爲使開發者操做更加便捷，FaceLandmarks68還提供了一些方法用於獲取五官的點位信息：

let landmarkPositions = landmarks.positions  // 獲取所有 68 個點
let jawline = landmarks.getJawOutline()  // 下巴輪廓 1~17
let leftEyeBbrow = landmarks.getLeftEyeBrow()  // 左眉毛 18~22
let rightEyeBrow = landmarks.getRightEyeBrow()  // 右眉毛 23~27
let nose = landmarks.getNose()  // 鼻子  28~36
let leftEye = landmarks.getLeftEye()  // 左眼 37~40
let rightEye = landmarks.getRightEye()  // 右眼 43~48
let mouth = landmarks.getMouth()  // 嘴巴 49~68

咱們能夠採用FaceLandmarks68.getMouth()方法獲取脣部的20個特徵點，並經過循環遍歷特徵點的位置，來獲取對應位置的canvas信息。

/**
     * 獲取嘴部20個特徵點的顏色
     * @param canvans
     * @param mouthPoint
     */
    getMouthColor:function (canvans,mouthPoint) {
      let context = canvans.getContext("2d")
      for (let i =0;i<mouthPoint.length;i++){
        let data = context.getImageData(mouthPoint[i]["_x"],mouthPoint[i]["_y"],1,1)
        this.mouthColors[i] = data.data
      }
    }

至此，咱們已經完成了女神嘴脣位置顏色的獲取，接下來就是將她們脣部20個特徵點的顏色和口紅的色號進行匹配，選擇相近的顏色值。

口紅顏色匹配

口紅顏色匹配能夠藉助github上一個口紅可視化色號庫 (https://github.com/Ovilia/lip...**。該庫收錄了紀梵希、聖羅蘭等口紅品牌的相關色號。

項目中的口紅顏色以json格式存儲：

{
    "brands":[
    {
      "name":"聖羅蘭",
      "series":[
        {
          "name": "瑩亮純魅脣膏",
          "lipsticks": [{
            "color": "#D62352",
            "id": "49",
            "name": "撩騷"
         },
         ... 
        }
      ]
    },
    ...
  ] 
}

咱們複製json格式文件，將脣部20個特徵點的顏色分別遍歷口紅庫中口紅的顏色進行對比，得到差值最小的一款口紅做爲匹配的結果值便可。

本文采用歐幾里得距離公式予以計算嘴脣的顏色和口紅的色號。步驟以下：
一、將口紅庫的color字段從十六進制轉換爲RGB模式；
二、將口紅的RGB和脣部的20個特徵點RGB帶入歐幾里得距離公式，計算得出差值最小的一款口紅色號做爲最終結果。

咱們將RGB做爲顏色的三個維度，帶入歐幾里得公式進行計算：

compareColor:function(r1,g1,b1,r2,g2,b2){
      let r = Math.pow((r1-r2),2)
      let g = Math.pow((g1-g2),2)
      let b = Math.pow((b1-b2),2)
      return Math.sqrt((r+g+b))
}

咱們把20個嘴部特徵點依次遍歷口紅庫中的顏色，記錄差值最小的一款口紅做爲最終結果並展現到UI界面上。

以上就是口紅分析神器的全步驟。