本案例参考: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
17
private onChang(){
        //获取选择图片
        var uploadImg: any = document.getElementById("uploadImg");
        var file = uploadImg.files[0];
        //判断图片类型
        var imageType = /^image\//;
        if(!imageType.test(file.type)) {
            alert("请选择图片类型上传");
            return;
        }
        //加载图片
        var reader = new FileReader();
        reader.onload = function(){
            window["homeScene"].loadFileComplete(reader.result);
        }
        reader.readAsDataURL(file);
    }

this.myImg是拖动到exml上的eui.Image组件,用来显示加载图片的。

[AppleScript] 纯文本查看 复制代码
1
2
3
4
5
6
//加载图片完成
public loadFileComplete(result){
        //将加载图片的数据赋值给myImg
        this.myImg.addEventListener(egret.Event.COMPLETE, this.onMyImgComplete, this);
        this.myImg.source = result;
}

三 拖拽和缩放手势,调整图片
然后我们需要调整这个图片的位置和比例。
这里我自己写了2个手势。具体看源码,代码太多就不贴了。
gesturePinch
gestureDrag

上传本地图片后。

四 gifjs工具类动态表情合成
我们调整完图片后,选择“确认生成”。
将图片容器pictrueGroup截图成几张renderTexture,用于gif显示。

[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
//截取合成图
 var render: egret.RenderTexture = new egret.RenderTexture();
 render.drawToTexture(this.pictureGroup, new egret.Rectangle(0,0,400,350));
 var img: eui.Image = new eui.Image();
 img.texture = render;
  
 var list = [];
 list.push(img.texture.toDataURL("image/png"));
  
 var render2: egret.RenderTexture = new egret.RenderTexture();
 this.imgGroup.y = 15;
 render2.drawToTexture(this.pictureGroup,new egret.Rectangle(0,0,400,350));
 var img2: eui.Image = new eui.Image();
 img2.texture = render2;
  
 list.push(img2.texture.toDataURL("image/png"));

注:我这里表情为了省事随便调的,就把y调了一下。实际根据需求,要更换表情图,挪动彭于晏,就像摆pose拍照一样。

现在我们已经截取了两张表情图的base64字符串了,下面我们来合成gif。
先创建显示gif的<img>标签。
我们获取egret的div,这里我设置id为gameDiv。 然后在这个div下创建一个img标签,id为"gif",这个标签将会用来显示gif。

[AppleScript] 纯文本查看 复制代码
1
2
3
4
5
6
//创建Gif
var htmlImg;
var gameDiv = document.getElementById("gameDiv");
htmlImg = document.createElement("img");
htmlImg.id = "gif";
gameDiv.appendChild(htmlImg);

我们把几张截图生成base64字符串数组,传递给gifjs的createGIF,这段代码会在id为"gif"的<img>标签下生成动态GIF。
createGIF写在index.html里。

[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!-- create gif -->
        <script src="gifshot.min.js"></script>
        <script>
                function createGif(imgList){
                        var src = imgList;
                        gifshot.createGIF({
                        gifWidth: 400,
                        gifHeight: 350,
                        images:  src,
                        interval: 1.0
                        },function(obj) {
                        if(!obj.error) {
                        var image = obj.image;
                        var imageDIV = document.getElementById('gif')
                        imageDIV.src = image;
                        }
                        });
                }
        </script>
        <!-- create gif end-->

生成的gif效果:

 

demo源码下载

【咸鱼教程】本地图片上传。动态GIF表情图生成的更多相关文章

  1. 本地图片上传与H5适配知识

    最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...

  2. 本地图片上传到GitHub,MarkDown使用Github图片地址

    最近在学习用markdown编辑器,我是直接用有道云笔记编辑的,感觉真的好好用,编辑了一半的博客,可以按样式保存在云笔记中,我再也不会忘记写博客了~~ 但是在编辑博客的时候发现了一个问题,那就是本地图 ...

  3. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  4. python实现本地图片上传到服务区

    本地图片上传到服务器,其本质上来讲,就是读取本地图片,复制到服务器,并返回服务器url 前端代码,用的form表单提交,form表单中包含两个文件选择表单元素,选择文件,点击提交按钮,提交form表单 ...

  5. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  6. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  7. Ueditor编辑器图片上传到万象优图

    最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...

  8. DWZ集成的xhEditor编辑器浏览本地图片上传的设置

    有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...

  9. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

随机推荐

  1. Android应用坐标系统全面具体解释

    1 背景 去年有非常多人私信告诉我让说说自己定义控件,事实上通观网络上的非常多博客都在讲各种自己定义控件,可是大多数都是授之以鱼.却非常少有较为系统性授之于渔的文章,同一时候由于自己也迟迟没有时间规划 ...

  2. zhuzher日志log

    val log=sc.textFile("/data/logstash/data/*.log") val rowRDD2=log2.map(line=>(line.split ...

  3. 两个大数组foreach,找出相同的key数量,所用的时间对比

    <?php function microtime_float() { list($usec, $sec) = explode(" ", microtime()); retur ...

  4. 【Deep Learning】RNN的直觉理解

    https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/

  5. WebGL 浏览器函数

    1.requestAnimationFrame(func) 请求浏览器在将来某时刻回调函数func以完成重绘.requestAnimationFrame()成功的一个关键是确定你在执行其他用户diam ...

  6. geoserver PostGIS的安装和使用

    PostGIS是一个非常流行并且开源的具有空间分析能力的关系型数据库,它作为PostgreSQL数据库的一个插件.PostgreSQL是一个功能非常强大并且开源的关系型数据库.目前项目使用的版本为Po ...

  7. tomcat 重启报错unregister mbean error javax.management.InstanceNotFoundException

    JAVA_OPTS='-Ddruid.registerToSysProperty=true' 多个应用部署到tomcat下需要在/bin/catalina.sh下添加上面这句话 添加位置在‘cygwi ...

  8. python带参装饰器的改良版

    简单点就是这种 def deco2(param=1): def _deco2(fun): def __deco2(*args, **kwargs): print (param) fun(*args, ...

  9. SpringBoot------文件上传

    1.pom.xml引入依赖配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  10. SpringMVC由浅入深day02_5数据回显_6异常处理器

    5 数据回显 5.1 什么数据回显 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 5.2 pojo数据回显方法 1.springmvc默认对pojo数据进行回显. po ...