建站
咨詢
售后
建站咨詢
新聞中心
最近火爆朋友圈的軍裝照H5大家一定還記憶猶新，其原理是先提取出照片中的面部，然后與模板進(jìn)行合成，官方的合成處理?yè)?jù)說(shuō)由天天P圖提供技術(shù)支持，后端合成后返回給前端展示，形式很新穎效果也非常好，整個(gè)流程涉及的人臉識(shí)別和圖像合成兩項(xiàng)核心技術(shù)在前端都有對(duì)應(yīng)的解決方案，因此理論上前端也可以完成人臉識(shí)別-提取-合成整個(gè)流程，實(shí)現(xiàn)純前端的軍裝照H5效果。
10年積累的網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有漳平免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
前端人臉識(shí)別
首先需要的是人臉識(shí)別，這個(gè)一聽(tīng)就覺(jué)得高大上的東西原理并不深?yuàn)W，無(wú)非是用人的面部特征規(guī)則對(duì)圖像進(jìn)行匹配和識(shí)別，這項(xiàng)工作前端雖然可以實(shí)現(xiàn)，但前端實(shí)現(xiàn)基本就只能依據(jù)內(nèi)置規(guī)則庫(kù)進(jìn)行匹配，這個(gè)庫(kù)的質(zhì)量就決定了識(shí)別質(zhì)量，而通常更成熟的方案是引入機(jī)器學(xué)習(xí)，讓程序不斷自我修正和提高，進(jìn)一步提高識(shí)別率，機(jī)器學(xué)習(xí)的前端庫(kù)倒是也有，但把這兩者結(jié)合起來(lái)的還沒(méi)發(fā)現(xiàn)，因此對(duì)前端人臉識(shí)別的準(zhǔn)確率不要報(bào)太高期望。
現(xiàn)有的前端人臉識(shí)別庫(kù)不算多，這里我們選擇的是效果相對(duì)好點(diǎn)的trackingjs，這個(gè)類庫(kù)功能非常強(qiáng)大，庫(kù)如其名，它可以完成各種追蹤類的圖像處理任務(wù)，人臉識(shí)別只是其眾多功能之一，而且通過(guò)選配插件，還可以精確識(shí)別眼睛、鼻子等五官的位置，貌似稍微折騰一下也可以實(shí)現(xiàn)美圖秀秀的效果。
這里我們只用trackingjs實(shí)現(xiàn)面部識(shí)別，初始化一個(gè)面部識(shí)別任務(wù)的代碼如下：
- //實(shí)例化
- var tracker = new tracking.ObjectTracker(['face']);
- //識(shí)別回調(diào)
- tracker.on('track', function(event) {
- if (!event.data.length) {
- return console.log('畫(huà)面中沒(méi)有人臉');
- }
- event.data.forEach(function(rect, i) {
- console.log(rect);//單個(gè)面部數(shù)據(jù)
- })
- })
- //配置參數(shù)
- ...
這樣一個(gè)面部識(shí)別任務(wù)就初始化完成了，調(diào)用方式如下：
- tracking.track('#img', tracker);
- //其中'#img'參數(shù)是目標(biāo)圖像的選擇器
在識(shí)別回調(diào)中event.data就是數(shù)組格式的面部數(shù)據(jù)，如果長(zhǎng)度為0則表示圖像中沒(méi)有人臉或者識(shí)別失敗，如果識(shí)別成功，單個(gè)面部數(shù)據(jù)的格式如下：
- {
- x: number, //面部位于原圖x軸方向位置
- y: nuber, //面部位于原圖y軸方向位置
- width:number, //面部區(qū)域?qū)挾?/li>
- height:nubmer //面部區(qū)域高度
- }
有了這個(gè)面部數(shù)據(jù)就可以很容易的將該區(qū)域從原圖中提取出來(lái)，前端當(dāng)然就用canvas啦，示例如下：
- var img = document.getElementById("img");
- var faceCtx = document.getElementById("mycanvas").getContext('2d');
- var theFace = ...; //假設(shè)我們識(shí)別到了theFace
- //使用drawImage()方法將面部繪制出來(lái)
- faceCtx.drawImage(img, theFace.x, theFace.y, theFace.width, theFace.height, 0, 0, theFace.width, theFace.height);
到這里我們已經(jīng)實(shí)現(xiàn)了面部識(shí)別 + 提取，而且代碼量也沒(méi)多少，其實(shí)這里面有個(gè)小坑要在實(shí)踐中才會(huì)發(fā)現(xiàn)，那就是trackingjs的配置，文檔中能找到4個(gè)跟識(shí)別有關(guān)的配置，分別是：
- setClassifiers(classifiers)
- setEdgesDensity(edgesDensity)
- setScaleFactor(scaleFactor)
- setStepSize(stepSize)
看不懂吧，我也看不懂，而且文檔中對(duì)他們沒(méi)有任何有用的說(shuō)明，在測(cè)試中我只使用了后兩個(gè)配置，翻譯過(guò)來(lái)分別是”比例因子”和”步長(zhǎng)”，經(jīng)過(guò)枯燥的人肉測(cè)試發(fā)現(xiàn)，這兩個(gè)參數(shù)的有效取值范圍分別在1 - 2和1.1 - 2，其中setStepSize不能為1，否則會(huì)瀏覽器會(huì)卡死，所以從1.1開(kāi)始取值，取值超過(guò)2也可以，但識(shí)別成功的概率就很低了。通過(guò)調(diào)整這兩個(gè)參數(shù)絕大多數(shù)圖像都可以成功識(shí)別，唯獨(dú)對(duì)面部大特寫(xiě)很難識(shí)別，這可能需要配合另外兩個(gè)參數(shù)吧，我實(shí)在沒(méi)耐心繼續(xù)人肉測(cè)試下去了，感興趣的自己回去玩吧。
前端圖像處理
經(jīng)過(guò)上一步的識(shí)別+提取我們已經(jīng)得到了面部圖像，要實(shí)現(xiàn)合成軍裝照效果我們還需要對(duì)面部圖像進(jìn)行處理，使色調(diào)與模板一致，將來(lái)才能毫無(wú)違和感的融合在一起，具體到軍裝照這個(gè)例子我們需要將面部重新著色，并達(dá)到”做舊”的老照片效果，如果用PS想必大家都會(huì)，但在前端怎么實(shí)現(xiàn)呢?
這里我們需要借助騰訊前端團(tuán)隊(duì)出品的AlloyImage，這是一個(gè)堪稱前端PS的前端圖像處理類庫(kù)，比如要實(shí)現(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);
- }
然后你就得到了一個(gè)做舊的人臉，還是非常簡(jiǎn)單的，AlloyImage的使用基本可以說(shuō)是傻瓜化，感興趣的就自己花個(gè)五分鐘去看下官方文檔吧，這里不再贅述。
然后就要說(shuō)一下我們這個(gè)圖像處理和人家天天P圖的差距了，雖然我們得到了理想的色調(diào)，但要想把隨便一張人臉與特定模板做合成，有兩件事必不可少。首先是面部角度矯正，如果模板是正的而你的照片是歪的，直接暴力拼接肯定很違和，所以需要先識(shí)別出面部角度，并糾正到指定角度;然后是面部中心定位，因?yàn)槿四樧R(shí)別的結(jié)果提取出來(lái)后不一定是以面部中心為中心的，所以在合成之前要識(shí)別出面部中心線，并以此為依據(jù)與模板進(jìn)行定位。然而這些我們都沒(méi)有，所以我們只能對(duì)輸入的圖像的要求更高，如果輸入了嘴歪眼斜的圖片，結(jié)果就只能尷尬了。
***的圖片合成部分就更簡(jiǎn)陋了，先將處理好的面部畫(huà)到畫(huà)布指定位置，然后將摳好圖的臉部透明png模板鋪在上面，完成。實(shí)際過(guò)程中需要處理一些小問(wèn)題，比如要根據(jù)模板的面部尺寸將面部圖像縮放到合適的尺寸;摳模板時(shí)要將邊緣模糊處理，而且盡量保留模板本來(lái)的面部輪廓，只將五官摳掉。即便這樣，合成結(jié)果還是很容易穿幫，不過(guò)純前端處理也沒(méi)有更好的辦法了。
效果展示
好了，說(shuō)的再多不如看個(gè)例子，示例提供三種圖片輸入源，分別是本地圖片、遠(yuǎn)程圖片、內(nèi)置示例。其中內(nèi)置的圖片大部分是提前在PS中糾正過(guò)角度的，而且內(nèi)置圖片會(huì)自動(dòng)匹配到我事先調(diào)校好的參數(shù)，不出意外可以直接識(shí)別出人臉;如果選擇本地圖片作為圖片源，***選擇頭部姿態(tài)垂直的正面照，同時(shí)參考內(nèi)置圖片的 參數(shù)設(shè)置調(diào)節(jié)參數(shù)，一次識(shí)別不成功很正常，需要多調(diào)幾次;也可以使用遠(yuǎn)程圖片識(shí)別，但因?yàn)閏anvas受到跨域策略影響，遠(yuǎn)程圖片只能識(shí)別不能提取和合成。
示例：純前端軍裝照合成(http://refined-x.com/projects/codes/tracking.html)
后記
最初是抱著好奇的心態(tài)開(kāi)始搗鼓這個(gè)項(xiàng)目的，雖然最終的合成效果遠(yuǎn)遠(yuǎn)達(dá)不到生產(chǎn)要求，但整個(gè)示例擼下來(lái)后對(duì)人臉識(shí)別和圖片處理技術(shù)都有了基本的認(rèn)識(shí)，對(duì)canvas操作中一些細(xì)節(jié)問(wèn)題的解決也略微補(bǔ)足了一下這方面的知識(shí)空白，算略有收獲吧。
網(wǎng)站題目：純前端實(shí)現(xiàn)人臉識(shí)別-提取-合成
路徑分享：http://www.dlmjj.cn/article/dpjchgd.html
