【咸鱼教程】本地图片上传。动态GIF表情图生成

本案例参考：http://emoji.decathlon.trustingme.cn/
但是实现方式不一样。
 


教程目录
一 head first
二 打开本地图片功能
三 拖拽和缩放手势，调整图片
四 gifjs工具类动态表情合成
五 demo源码下载


一 head first
显示原理
1.1 利用<input>标签打开本地图片。
1.2 FileReader读取图片，生成base64字符串给Egret显示。
1.3 Egret中利用RenderTexture截取多张表情图的base64字符串，传给gifjs工具类生成动态GIF。
 

二 本地图片上传
首先我们实现打开本地图片功能。微信里有图片接口，但是还得接微信jssdk。
我们这里用<input>标签实现。

[AppleScript]  纯文本查看 复制代码

?

1	< input type = "file" id = "uploadImg" >

页面显示效果这样
<ignore_js_op> 
我们把它隐藏起来，不然显示在游戏里就很丑了。

[AppleScript]  纯文本查看 复制代码

?

1	< input type = "file" id = "uploadImg" style = "display:none" / >

我们在exml上创建一个上传按钮，ID为openFileBtn。
创建一个确认按钮，ID为okBtn。
再创建一个图片的容器。里面有3层，顶层表情遮罩图，中间放我将要上传的图片，底层放表情背景。
 


我们在ts里监听我要换脸按钮的点击事件，当点击“我要换脸”时，触发input标签的click事件。
这样即使我们隐藏了input标签，仍然能使用input标签的打开本地文件的功能。

[AppleScript]  纯文本查看 复制代码

?

1 2 3

var uploadImg : any = document .getElementById ( "uploadImg" ) ; uploadImg.onchange = this.onChang; uploadImg.click ( ) ;

点击“我要换脸”，看看input标签生效了吧。手机上的效果则是让你选择打开相册。
 


我们选择的是彭于晏，然后用FileReader加载打开的图片，将read结果base64字符串赋值给eui.Image，这样才能把彭于晏显示在exml中。

[AppleScript]  纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16