本案例参考: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. 腾讯大渝网(esf.cq.qq.com)任意手机注册+短信验证码泄露

    地址在这里:http://esf.cq.qq.com/c=register 直接返回短信验证码, data: {data:您的手机验证码为8453,2小时内有效., auth_code:8453}ti ...

  2. 安卓开发笔记——WebView组件

    我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...

  3. C语言之Bit-wise Operation和Logical Operation

    首先第一点:十六进制位运算和逻辑运算 都是先转化二进制,后输出结果(十六进制,二或十)Bit-Wise Operations (位运算)包括:& 按位与 | 按位或 ^ 按位异或 ~ 取反 & ...

  4. 修复日志,阻止给日志多次添加handlers时候重复打印的问题

    1.解决如果多次添加handlers重复打印的问题.在__add_handlers方法中作出判断. 2.由get_logger_and_add_handlers和get_logger_without_ ...

  5. python--文件I/O--11

    原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 一.打印到屏幕 最简单的 ...

  6. MongoDB管理

    前几篇文章都是从开发和使用的角度了解了MongoDB的各个知识点,这篇文章将从MongoDB管理的角度入手,了解MongoDB管理所要了解的基本知识. 数据库命令 在前面几篇文章中,已经接触了一些数据 ...

  7. flexbox父盒子align-items属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. requests 安装

    requests 是用来发送 HTTP 请求的一个库,requests 是对 urllib 和 urllib2 进行封装的一个模块,用来取代 urllib 和 urllib2,可以使用以下两种方法安装 ...

  9. VS无法导航到插入点F12失败

    关闭VS 开启控制台并导航到Visual安装文件夹,例如C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\ID ...

  10. [Vim] 搜索模式(正则表达式)

    本文介绍如何使用Vim的搜索模式. 搜索单词 Vim中使用 \< 和 \> 分别表示单词的开头和结尾,例如查找单词 i 而不是字母 i ,在正常模式下,按下 / 启动搜索模式,输入 \&l ...