廣汽新能源App：生成你的拜年表情包及項目小經驗
一到過年，各大品牌都在做自己的新年H5。來自廣汽新能源App運營方的需求。喬木互動結合人臉融合技術，制作了一支生成拜年表情包的H5。上傳自己的頭像，18種拜年姿勢任君選擇。
掃描二維碼，生成你的拜年新姿勢！
（數英APP用戶需點擊放大二維碼，長按識別）
掃描二維碼，立即體驗！
分享一些干貨
項目磕磕碰碰，但是過程中，也有所收獲。跟大家一起分享下，在H5中制作表情包的個方案。
1、制作靜態的表情
需要用到人臉融合技術。項目中我們使用的是騰訊天天p的接口。（天天P圖是收費，價格不便宜哦！）
融合后的效果還是不錯的，有多個檔位可調試。
將制作好的頭像表情上傳至天天P圖，融合后，回掉一張png圖到本地。
我們有了這個圖，就可以放到制作好的底圖上，生成表情了。
2、制作動態的gif
項目過程中，客戶提到要做成動態的表情。雖然后面因為低端手機卡頓的問題pass了，但是仔細考慮下，只要幀數控制在個位數，手機性能還是能夠跑得動的。
依然是用天天p圖的人臉融合接口，得到一張人臉的png圖片。
這里只需將png圖片與設計好的動作對好位置，一一合并即可。
這里就可以用到gif.js的插件https://github.com/jnordberg/gif.js/
這個制作過程中還有遇到坑，生成gif在微信環境下竟然沒法保存，陶騰了半天終于找到一個解決方案。通過FileReader讀取blob圖片數據轉為base64進行保存。
通過這個方法就可以制作成生成動態的gif表情了。
3、生成在線表情動畫
這個方案雖然也被pass，但是我們在做技術執行的時候，是很推薦的，因為真的可以很好玩。
操作流程是這樣的，使用adobe flash軟件，在Canvas模式下制作好動畫，將面部作為單獨原件。Canvas的原理就是讀取原件的位置數據，進行渲染，那這樣我們就可以很簡單的制作了。
依然是從天天p圖處獲取一張人臉照片，在createjs框架下替換頭像即可，生成一段好玩的動畫。
缺點是沒法保存到本地，智能分享鏈接，或者錄屏分享出去。
專業評分
專業評分已截止
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）