形色APP：今年变身过圣诞

2016-12-22 H5案例分享 H5案例分享

案例：今年变身过圣诞

出品：形色APP

亮点：

策划上，图片合成贺卡类，① 圣诞老人背着包裹走过来了，点击圣诞老人的面部，上传个人大头照，变身圣诞老人；② 而后去找驯鹿来拉雪橇，再上传一张大头照生成驯鹿，啦啦啦，去找乳猪啦；③ 有只乳猪害羞遮住了脸，你可以选择上传一张大头照，变身乳猪；④ 小伙伴们都到齐了，圣诞来人乘着驯鹿拉的雪橇带着乳猪来啦，而后在换上或写上圣诞祝福语，生成贺卡，装进礼物盒。
设计上，圣诞风，采用红色作为主色调，蓝绿色作为辅色调，圣诞老人和驯鹿和乳猪好萌啊~
交互上，必须上传一张大头照，变身圣诞老人后才能继续后面的操作，而后可以选择性上传照片生成驯鹿、乳猪，不上传照片直接去送礼物也可以哦~
技术上，合成图片采用的是canvas，上传的照片提交给后台，识别出是否是带人脸的照片，如果图片正确则剪裁出面部轮廓，用canvas合成图片。

技术实现： jQuery + Canvas

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

今年变身过圣诞-查阅二维码

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签