一到过年，各大品牌都在做自己的新年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条）