Git項目源碼：
花絮
今天是一年一度的情人節。都說女生的梳妝臺上永遠缺一支口紅，在這個時候，給心儀的女神送一支適合她的口紅，表達自己的想念之情準沒錯。想到女神收到口紅后欣喜的樣子，還真有點小激動呢！
作為技術直男，怎樣挑選色號才能不出錯呢？上次送女神死亡芭比粉的翻車經歷還歷歷在目。為此，在這段宅家的日子里，小編痛定思痛，制作出了一款口紅分析神器：計算機根據女神的照片，自動識別其唇色，從而幫她挑選與唇色最匹配的口紅色號。
有了這個神器，我們就能憑借珍藏的女神美照，輕松分析出她們所匹配的口紅款式ai中怎樣查圖片中顏色的色號，進而投其所好，從此沐浴在愛情的春風里！
開始動工
口紅分析神器的制作步驟主要有：
識別照片中嘴唇部分的顏色；對比口紅顏色，篩選出適合的口紅款式。 識別照片中嘴唇顏色
首先我們應該讓機器準確識別出照片中嘴唇的位置。的AI框架可以幫助開發者搭建訓練機器學習的模型。
的AI框架能夠幫助開發者搭建訓練機器學習的模型。
對于入門者而言，自己使用去訓練模型不是一蹴而就的，這里面涉及到很多深度學習以及的基本概念，例如張量、隱藏層、激活函數、卷積層、池化層等。
好在深度學習的應用并不難，大神的人臉識別模型框架face-api可以幫我們忙。構建于.js核心庫之上，face-api是基于的神經網絡所進行的人臉樣本訓練。借助它，我們能夠使程序快速獲得人臉識別的能力。
好在深度學習的應用并不困難，這讓我想起了大神的人臉識別模型框架:face-api。face-api本質上是構建于.js核心庫之上，基于的神經網絡進行人臉樣本的訓練。總而言之，借助它，我們能夠快速使我們的程序獲得人臉識別的能力。
深度學習的原理
深度學習指的是通過深度神經網絡訓練機器，使其獲得與人類相似的學習與分析能力，進而完成識別文字、圖像和語音的任務。
深度學習主要包括以下三個步驟：
構建深度神經網絡；輸入數據樣本，獲得模型并評估效果；優化模型并輸出。
face-api已經實現了上述三個步驟，為開發者提供了人臉識別的模型，并封裝成了簡易的api，使我們能在前端項目上更方便地使用人臉識別技術。如圖所示，藍色部分是face-api已經完成的任務，而我們要做的則是輸入人臉圖片到已經訓練好的模型中，得到輸出值即可，即橙色框內的部分。
face-api的使用 引入方式
方式1:
如果我們不使用打包工具的話，可以直接將庫中的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 工程的目錄下放置了模型文件，我們只需要將全部拷貝到工程目錄中即可。
通過大家可以加載對應的模型：
faceApi.nets.ssdMobilenetv1.load('/weights') //加載ssdMobilenetv1 目標檢測模型
faceApi.nets.faceLandmark68Net.load('/weights')//加載面部 68 點特征識別模型
在口紅分析神器中，我們僅需要加載和模型即可。
加載完成后，大家可以調用.(input)來識別單個人臉或使用.(input)來識別多張人臉。
const detections1 = await faceapi.detectSingleFace(input) //return FaceDetection | undefined
const detections2 = await faceapi.detectAllFaces(input) //return Array
其中，對象返回了人臉識別的相關信息，如置信度、人臉邊框等：
{
"_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
}
....
}
僅靠返回的對象還無法滿足需求，我們可以調用鏈式，返回人臉的68個特征點信息：
{
detection: FaceDetection,
landmarks: FaceLandmarks68
}
其中，對象涵蓋了人臉的68個特征點信息，大家可以通過以下代碼查看效果：
let canvas = faceApi.createCanvasFromMedia(image)
faceApi.draw.drawFaceLandmarks(canvas,landmarks.landmarks) //繪畫68個特征點
canvas.toBlob(function(blob){
console.log(URL.createObjectURL(blob))
})
不難發現，模型根據68個特征點標記了人臉的五官位置。大家可以借助.獲得Array(68)的數組，這些數組元素便是68個特征點。具體的點位的分布如下：
`
此外，為使開發者操作更加便捷，還提供了一些方法用于獲取五官的點位信息：
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
我們可以采用.()方法獲取唇部的20個特征點，并通過循環遍歷特征點的位置，來獲取對應位置的信息。
/**
* 獲取嘴部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個特征點的顏色和口紅的色號進行匹配，選擇相近的顏色值。
口紅顏色匹配
口紅顏色匹配可以借助上一個口紅可視化色號庫 ()**。該庫收錄了紀梵希、圣羅蘭等口紅品牌的相關色號。
項目中的口紅顏色以json格式存儲：
{
"brands":[
{
"name":"圣羅蘭",
"series":[
{
"name": "瑩亮純魅唇膏",
"lipsticks": [{
"color": "#D62352",
"id": "49",
"name": "撩騷"
},
...
}
]
},
...
]
}
我們復制json格式文件，將唇部20個特征點的顏色分別遍歷口紅庫中口紅的顏色進行對比，獲得差值最小的一款口紅作為匹配的結果值即可。
本文采用歐幾里得距離公式予以計算嘴唇的顏色和口紅的色號。步驟如下：
1、將口紅庫的color字段從十六進制轉換為RGB模式；
2、將口紅的RGB和唇部的20個特征點RGB帶入歐幾里得距離公式，計算得出差值最小的一款口紅色號作為最終結果。
我們將RGB作為顏色的三個維度ai中怎樣查圖片中顏色的色號，帶入歐幾里得公式進行計算：
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界面上。