去年的建軍節(jié)窿凤，一個展示軍裝照的H5人臉融合游戲火遍朋友圈，帶來很好的傳播效果跨蟹。最近歐冠決賽要來了，公司決定做一個尋找和你最像的歐冠球星的H5游戲橘沥，那么該怎么做呢窗轩？認真分析了一下，這個游戲其實用到的技術(shù)還是挺多的座咆，是一個比較綜合的項目痢艺。主要用到技術(shù)如下：
人臉識別
Python web和Java web
域名解析和nginx
微信JS
H5頁面
人臉識別
人臉識別的API各大平臺都有提供，百度介陶，阿里堤舒，優(yōu)圖(騰訊)，F(xiàn)ace++. 各家的API大體相似哺呜，主要區(qū)別只是取的點的個數(shù)和返回結(jié)果的數(shù)據(jù)結(jié)構(gòu)舌缤，都可用。BAT的都有免費可用(如果對QPS沒有過高要求的話)某残，F(xiàn)ace++ 需要收費1元/次(墻裂懷疑失了智)国撵。綜合比較之后選擇使用優(yōu)圖。
http://open.youtu.qq.com/#/develop/api-face-analysis-detect
SDK下載
http://open.youtu.qq.com/#/develop/tool-sdk
后端采用python玻墅，所以下載python版本的SDK介牙。
從優(yōu)圖獲取的人臉識別之后的信息全部是面部點的信息，需要進行處理澳厢，具體的處理方法全部在
https://github.com/tonyiweb/face_merge_master (star环础，fork來一套?)
人臉融合大師剩拢，可以滿足你10分鐘做出人臉融合功能的理想工具线得，你值得擁有。
Python web和Java web
基于性能和表現(xiàn)的考慮裸扶，做了一個分離框都。圖片識別和融合的功能全部放在一個Python web項目中，作為一個api呵晨，然后在Java web項目中調(diào)用這個API魏保，將返回的結(jié)果或者錯誤信息返回到H5頁面。
Python web
python是一個能快速開發(fā)的語言摸屠，有很多易用的web框架可以使用谓罗，這里就選擇Tornado這個框架。
服務(wù)器上通過nohup python -u run.py& 就可以啟動一個端口號為9010(代碼中可以指定季二，一般在7000以后)的服務(wù)檩咱。 nohup可以保證服務(wù)長期后臺運行揭措，并且可以通過tail -f nohup.out來查看日志。服務(wù)可以通過ps -ef|grep python查詢服務(wù)的pid刻蚯，再通過kill -9 pid來停止绊含。
Java web
采用SpringBoot搭建的微服務(wù)，沒有任何界面炊汹。接受H5頁面?zhèn)鬟^來的圖片躬充，去調(diào)用人臉融合的API，根據(jù)結(jié)果返回調(diào)用結(jié)果或者錯誤信息讨便。
域名解析和nginx
域名解析的過程其實就是一個通過名字(相對好記一些)找IP地址(相對難以記憶)的過程充甚，而IP地址又對應(yīng)一臺服務(wù)器，也就是通過名字定位服務(wù)器霸褒。在控制臺的域名解析中新加一條記錄伴找，指向代碼部署的服務(wù)器。
因為一臺服務(wù)器上其實是部署多個服務(wù)废菱，也會被多個域名所指向技矮，所以其實還需要一個東西來指引服務(wù)所要對應(yīng)的域名，這個東西就是nginx昙啄。 一個服務(wù)一般是要對應(yīng)一個端口的穆役，nginx可以監(jiān)聽一個端口，然后將這個端口的服務(wù)定向到某個域名梳凛。
注意:1耿币，https服務(wù)需要安全證書，可以在阿里云的安全中的CA證書服務(wù)中購買(有免費的Symantic的證書)
2韧拒，一般默認的是http的淹接，如果沒有必要可以不用帶安全證書的https服務(wù)
3，通過whereis nginx命令查找nginx的位置叛溢，通過vhost統(tǒng)一管理nginx配置文件
4塑悼，配置完nginx之后，需要重啟nginx服務(wù)楷掉，命令: ./nginx -s reload 如果沒有錯誤厢蒜，就說明已經(jīng)重啟了。
微信JS
因為網(wǎng)頁是放在微信環(huán)境下傳播的烹植，需要使用到微信的一些基礎(chǔ)功能斑鸦，如拍照，所以使用微信的JS SDK.
參考文檔：https://www.w3cschool.cn/weixinkaifawendang/h8ap1qe5.html
1草雕，配置微信巷屿。需要在后臺根據(jù)jsapi_ticket等信息生成簽名
（1）前臺
//這里的url為當前頁面的路徑，為了使得分享之后的鏈接也是可用
var url = window.location.href;
$.get(baseUrl+"/common/get_wx_config",{url:url},
function(data){
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來墩虹，若要查看傳入的參數(shù)嘱巾，可以在pc端打開憨琳，參數(shù)信息會通過log打出，僅在pc端時才會打印旬昭。
appId: data.appId, // 必填篙螟，公眾號的唯一標識
timestamp: data.timestamp, // 必填，生成簽名的時間戳
nonceStr: data.nonceStr, // 必填问拘，生成簽名的隨機串
signature: data.signature,// 必填闲擦，簽名，
jsApiList: ['checkJsApi','chooseImage','uploadImage','onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] // 必填场梆，需要使用的JS接口列表
});
setShareInfo('','');
})
（2）后臺,微信簽名過程
2,拍照或者從相冊中選擇照片
var serverId='0';
function getPic(){
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要檢測的JS接口列表，所有JS接口列表見附錄2,
success: function(res) {
if(res.checkResult.chooseImage){
wx.chooseImage({
count: 1, // 默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖纯路，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機或油，默認二者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
$("#selfImg").attr("src",localIds);
wx.uploadImage({
localId: localIds[0], // 需要上傳的圖片的本地ID驰唬，由chooseImage接口獲得
isShowProgressTips: 1, // 默認為1顶岸，顯示進度提示
success: function (res) {
serverId = res.serverId; // 返回圖片的服務(wù)器端ID
$("#nextBtn").css("display","block");
}
});
}
});
}else{
showAlert("微信版本過低,無法使用相機和相冊功能","fail");
}
}
});
}
3,上傳圖片并獲得人臉融合結(jié)果
(1)前臺
if(serverId!='0'){
if(gender==1){
showAlert("正在玩命給小主兒尋找最像你的球星...","loading");
}else{
showAlert("正在玩命給小主兒尋找最像你的球星太太...","loading");
}
//在服務(wù)器端下載圖片，并作人臉融合叫编，返回融合后的結(jié)果給img的src
$.get(baseUrl+"/common/download_image",{serverId:serverId,gender:gender},
function(data){
if(data.status=='success'){
hideAlert();
$("#loadingPage").css("display","none");
$("#firstPage").css("display","none");
$("#secondPage").css("display","none");
$("#thirdPage").css("display","block");
var imageData = JSON.parse(data.data);
$("#resultName").html(imageData.modelShortName);
if(gender==1){
$("#discriptionText").html(imageData.description+'辖佣，要被你迷倒啦(^_-');
setShareInfo(imageData.imageUrl[2],'和我最像的歐冠球星是'+imageData.modelShortName+'，'+imageData.description)
}else{
$("#discriptionText").html(imageData.modelName+'搓逾，'+imageData.description+'卷谈，要被你迷倒啦(^_-');
setShareInfo(imageData.imageUrl[2],'和我最像的歐冠女神是'+imageData.modelShortName+'，'+imageData.description)
}
$('#firstResultImg').animateCss('fadeIn', function() {
$("#firstResultImg").attr("src",imageData.imageUrl[0]);
$("#firstResultImg").addClass('animated flash');
$("#secondResultImg").animateCss('fadeIn',function(){
$("#secondResultImg").attr("src",imageData.imageUrl[1]);
$("#secondResultImg").addClass('animated flash');
$("#thirdResultImg").animateCss('fadeIn',function(){
$("#thirdResultImg").attr("src",imageData.imageUrl[2]);
$("#thirdResultImg").addClass('animated flash');
$("#fourthResultImg").animateCss('fadeIn',function(){
$("#fourthResultImg").attr("src",imageData.imageUrl[3]);
$("#fourthResultImg").addClass('animated flash');
$("#resultName").addClass('animated bounceIn');
});
});
});
});
}else{
if(gender==1){
showAlert("好遺憾霞篡，沒有找到和你相像的球星呢...換張照片世蔗，再玩一次吧","fail");
}else{
showAlert("好遺憾，沒有找到和你相像的球星太太呢...換張照片朗兵，再玩一次吧","fail");
}
}
})
}else{
showAlert("好遺憾污淋，你還沒有上傳任何照片哦...","fail");
}
（2）后臺,上傳照片并進行人臉融合
注意：需要在真機上才可以調(diào)用相機和相冊
注意：要使用的域名必須在公眾號設(shè)置——>功能設(shè)置中添加
H5頁面
頁面的大半是要依賴UI設(shè)計師，下面放些設(shè)計圖余掖，實現(xiàn)過程就省略掉(假裝不重要.)...
后面是制作完成后得到頁面(請在微信中打開): https://worldcup.superwr.top/index.html
另外還有世界杯的改進版(加入了生成海報圖片和負載均衡):https://worldcup.pro365.cn/index.html
注意:H5頁面的難點其實是在于兼容寸爆，這里通過計算設(shè)備寬度，得到相對尺寸rem盐欺，然后給元素設(shè)置以rem為單位的位置尺寸等信息,做到全部兼容ios移動設(shè)備和大部分Android設(shè)備
注意:頁面中使用到了Animate.css這個CSS動畫框架赁豆，鏈接:http://blog.superwr.top/2018/%E5%8A%A8%E7%94%BB%E6%8F%92%E4%BB%B6animate-css%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E/
歡迎訪問個人博客:http://blog.superwr.top/
