[[204016]]

最近火爆朋友圈的軍裝照H5大家一定還記憶猶新，其原理是先提取出照片中的面部，然后與模板進(jìn)行合成，官方的合成處理據(jù)說由天天P圖提供技術(shù)支持，后端合成后返回給前端展示，形式很新穎效果也非常好，整個流程涉及的人臉識別和圖像合成兩項核心技術(shù)在前端都有對應(yīng)的解決方案，因此理論上前端也可以完成人臉識別-提取-合成整個流程，實現(xiàn)純前端的軍裝照H5效果。

前端人臉識別

首先需要的是人臉識別，這個一聽就覺得高大上的東西原理并不深奧，無非是用人的面部特征規(guī)則對圖像進(jìn)行匹配和識別，這項工作前端雖然可以實現(xiàn)，但前端實現(xiàn)基本就只能依據(jù)內(nèi)置規(guī)則庫進(jìn)行匹配，這個庫的質(zhì)量就決定了識別質(zhì)量，而通常更成熟的方案是引入機(jī)器學(xué)習(xí)，讓程序不斷自我修正和提高，進(jìn)一步提高識別率，機(jī)器學(xué)習(xí)的前端庫倒是也有，但把這兩者結(jié)合起來的還沒發(fā)現(xiàn)，因此對前端人臉識別的準(zhǔn)確率不要報太高期望。

現(xiàn)有的前端人臉識別庫不算多，這里我們選擇的是效果相對好點的trackingjs，這個類庫功能非常強(qiáng)大，庫如其名，它可以完成各種追蹤類的圖像處理任務(wù)，人臉識別只是其眾多功能之一，而且通過選配插件，還可以精確識別眼睛、鼻子等五官的位置，貌似稍微折騰一下也可以實現(xiàn)美圖秀秀的效果。

這里我們只用trackingjs實現(xiàn)面部識別，初始化一個面部識別任務(wù)的代碼如下：

//實例化 
var tracker = new tracking.ObjectTracker(['face']); 
//識別回調(diào) 
tracker.on('track', function(event) { 
    if (!event.data.length) { 
        return console.log('畫面中沒有人臉'); 
    } 
    event.data.forEach(function(rect, i) { 
        console.log(rect);//單個面部數(shù)據(jù) 
    }) 
}) 
//配置參數(shù) 
... 

這樣一個面部識別任務(wù)就初始化完成了，調(diào)用方式如下：

tracking.track('#img', tracker); 
//其中'#img'參數(shù)是目標(biāo)圖像的選擇器 

在識別回調(diào)中event.data就是數(shù)組格式的面部數(shù)據(jù)，如果長度為0則表示圖像中沒有人臉或者識別失敗，如果識別成功，單個面部數(shù)據(jù)的格式如下：

{ 
    x: number,          //面部位于原圖x軸方向位置 
    y: nuber,           //面部位于原圖y軸方向位置 
    width:number,       //面部區(qū)域?qū)挾?nbsp;
    height:nubmer       //面部區(qū)域高度 
} 

有了這個面部數(shù)據(jù)就可以很容易的將該區(qū)域從原圖中提取出來，前端當(dāng)然就用canvas啦，示例如下：

var img = document.getElementById("img"); 
var faceCtx = document.getElementById("mycanvas").getContext('2d'); 
  
var theFace = ...; //假設(shè)我們識別到了theFace 
  
//使用drawImage()方法將面部繪制出來 
faceCtx.drawImage(img, theFace.x, theFace.y, theFace.width, theFace.height, 0, 0, theFace.width, theFace.height); 

到這里我們已經(jīng)實現(xiàn)了面部識別 + 提取，而且代碼量也沒多少，其實這里面有個小坑要在實踐中才會發(fā)現(xiàn)，那就是trackingjs的配置，文檔中能找到4個跟識別有關(guān)的配置，分別是：

setClassifiers(classifiers) 
 
setEdgesDensity(edgesDensity) 
 
setScaleFactor(scaleFactor) 
 
setStepSize(stepSize) 

看不懂吧，我也看不懂，而且文檔中對他們沒有任何有用的說明，在測試中我只使用了后兩個配置，翻譯過來分別是”比例因子”和”步長”，經(jīng)過枯燥的人肉測試發(fā)現(xiàn)，這兩個參數(shù)的有效取值范圍分別在1 - 2和1.1 - 2，其中setStepSize不能為1，否則會瀏覽器會卡死，所以從1.1開始取值，取值超過2也可以，但識別成功的概率就很低了。通過調(diào)整這兩個參數(shù)絕大多數(shù)圖像都可以成功識別，唯獨對面部大特寫很難識別，這可能需要配合另外兩個參數(shù)吧，我實在沒耐心繼續(xù)人肉測試下去了，感興趣的自己回去玩吧。

前端圖像處理

經(jīng)過上一步的識別+提取我們已經(jīng)得到了面部圖像，要實現(xiàn)合成軍裝照效果我們還需要對面部圖像進(jìn)行處理，使色調(diào)與模板一致，將來才能毫無違和感的融合在一起，具體到軍裝照這個例子我們需要將面部重新著色，并達(dá)到”做舊”的老照片效果，如果用PS想必大家都會，但在前端怎么實現(xiàn)呢?

這里我們需要借助騰訊前端團(tuán)隊出品的AlloyImage，這是一個堪稱前端PS的前端圖像處理類庫，比如要實現(xiàn)上述效果，我們只需要這樣：

var faceImg = document.getElementById("theFace"); 
faceImg.loadOnce(function() { 
    AlloyImage(this).act("灰度處理").add( 
        AlloyImage(this.width, this.height, "#808080") 
        .act("高斯模糊", 4) 
        .act("色相/飽和度調(diào)節(jié)", 22, 45, 0, true), 
        "疊加" 
    ).replace(this); 
} 

然后你就得到了一個做舊的人臉，還是非常簡單的，AlloyImage的使用基本可以說是傻瓜化，感興趣的就自己花個五分鐘去看下官方文檔吧，這里不再贅述。

然后就要說一下我們這個圖像處理和人家天天P圖的差距了，雖然我們得到了理想的色調(diào)，但要想把隨便一張人臉與特定模板做合成，有兩件事必不可少。首先是面部角度矯正，如果模板是正的而你的照片是歪的，直接暴力拼接肯定很違和，所以需要先識別出面部角度，并糾正到指定角度;然后是面部中心定位，因為人臉識別的結(jié)果提取出來后不一定是以面部中心為中心的，所以在合成之前要識別出面部中心線，并以此為依據(jù)與模板進(jìn)行定位。然而這些我們都沒有，所以我們只能對輸入的圖像的要求更高，如果輸入了嘴歪眼斜的圖片，結(jié)果就只能尷尬了。

***的圖片合成部分就更簡陋了，先將處理好的面部畫到畫布指定位置，然后將摳好圖的臉部透明png模板鋪在上面，完成。實際過程中需要處理一些小問題，比如要根據(jù)模板的面部尺寸將面部圖像縮放到合適的尺寸;摳模板時要將邊緣模糊處理，而且盡量保留模板本來的面部輪廓，只將五官摳掉。即便這樣，合成結(jié)果還是很容易穿幫，不過純前端處理也沒有更好的辦法了。

效果展示

好了，說的再多不如看個例子，示例提供三種圖片輸入源，分別是本地圖片、遠(yuǎn)程圖片、內(nèi)置示例。其中內(nèi)置的圖片大部分是提前在PS中糾正過角度的，而且內(nèi)置圖片會自動匹配到我事先調(diào)校好的參數(shù)，不出意外可以直接識別出人臉;如果選擇本地圖片作為圖片源，***選擇頭部姿態(tài)垂直的正面照，同時參考內(nèi)置圖片的 參數(shù)設(shè)置調(diào)節(jié)參數(shù)，一次識別不成功很正常，需要多調(diào)幾次;也可以使用遠(yuǎn)程圖片識別，但因為canvas受到跨域策略影響，遠(yuǎn)程圖片只能識別不能提取和合成。

示例：純前端軍裝照合成(http://refined-x.com/projects/codes/tracking.html)

后記

最初是抱著好奇的心態(tài)開始搗鼓這個項目的，雖然最終的合成效果遠(yuǎn)遠(yuǎn)達(dá)不到生產(chǎn)要求，但整個示例擼下來后對人臉識別和圖片處理技術(shù)都有了基本的認(rèn)識，對canvas操作中一些細(xì)節(jié)問題的解決也略微補(bǔ)足了一下這方面的知識空白，算略有收獲吧。