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