【咸鱼教程】本地图片上传。动态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>标签实现。
1
|
< input type = "file" id = "uploadImg" > |
页面显示效果这样
<ignore_js_op>
我们把它隐藏起来,不然显示在游戏里就很丑了。
1
|
< input type = "file" id = "uploadImg" style = "display:none" / > |
我们在exml上创建一个上传按钮,ID为openFileBtn。
创建一个确认按钮,ID为okBtn。
再创建一个图片的容器。里面有3层,顶层表情遮罩图,中间放我将要上传的图片,底层放表情背景。
我们在ts里监听我要换脸按钮的点击事件,当点击“我要换脸”时,触发input标签的click事件。
这样即使我们隐藏了input标签,仍然能使用input标签的打开本地文件的功能。
1
2
3
|
var uploadImg : any = document .getElementById ( "uploadImg" ) ; uploadImg.onchange = this.onChang; uploadImg.click ( ) ; |
点击“我要换脸”,看看input标签生效了吧。手机上的效果则是让你选择打开相册。
我们选择的是彭于晏,然后用FileReader加载打开的图片,将read结果base64字符串赋值给eui.Image,这样才能把彭于晏显示在exml中。
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组件,用来显示加载图片的。
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显示。
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 render 2 : egret.RenderTexture = new egret.RenderTexture ( ) ; this.imgGroup.y = 15 ; render 2. drawToTexture ( this.pictureGroup , new egret.Rectangle ( 0 , 0 , 400 , 350 ) ) ; var img 2 : eui.Image = new eui.Image ( ) ; img 2. texture = render 2 ; list .push ( img 2. texture.toDataURL ( "image/png" ) ) ; |
注:我这里表情为了省事随便调的,就把y调了一下。实际根据需求,要更换表情图,挪动彭于晏,就像摆pose拍照一样。
现在我们已经截取了两张表情图的base64字符串了,下面我们来合成gif。
先创建显示gif的<img>标签。
我们获取egret的div,这里我设置id为gameDiv。 然后在这个div下创建一个img标签,id为"gif",这个标签将会用来显示gif。
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里。
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表情图生成的更多相关文章
- 本地图片上传与H5适配知识
最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...
- 本地图片上传到GitHub,MarkDown使用Github图片地址
最近在学习用markdown编辑器,我是直接用有道云笔记编辑的,感觉真的好好用,编辑了一半的博客,可以按样式保存在云笔记中,我再也不会忘记写博客了~~ 但是在编辑博客的时候发现了一个问题,那就是本地图 ...
- TinyMCE的使用(包括汉化及本地图片上传功能)
TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...
- python实现本地图片上传到服务区
本地图片上传到服务器,其本质上来讲,就是读取本地图片,复制到服务器,并返回服务器url 前端代码,用的form表单提交,form表单中包含两个文件选择表单元素,选择文件,点击提交按钮,提交form表单 ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- Ueditor编辑器图片上传到万象优图
最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...
- DWZ集成的xhEditor编辑器浏览本地图片上传的设置
有关xhEditor的文件上传配置官方文档链接:http://i.hdu.edu.cn/dcp/dcp/comm/xheditor/demos/demo08.html 一.xhEditor图片上传的配 ...
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...
随机推荐
- 腾讯大渝网(esf.cq.qq.com)任意手机注册+短信验证码泄露
地址在这里:http://esf.cq.qq.com/c=register 直接返回短信验证码, data: {data:您的手机验证码为8453,2小时内有效., auth_code:8453}ti ...
- 安卓开发笔记——WebView组件
我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...
- C语言之Bit-wise Operation和Logical Operation
首先第一点:十六进制位运算和逻辑运算 都是先转化二进制,后输出结果(十六进制,二或十)Bit-Wise Operations (位运算)包括:& 按位与 | 按位或 ^ 按位异或 ~ 取反 & ...
- 修复日志,阻止给日志多次添加handlers时候重复打印的问题
1.解决如果多次添加handlers重复打印的问题.在__add_handlers方法中作出判断. 2.由get_logger_and_add_handlers和get_logger_without_ ...
- python--文件I/O--11
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 一.打印到屏幕 最简单的 ...
- MongoDB管理
前几篇文章都是从开发和使用的角度了解了MongoDB的各个知识点,这篇文章将从MongoDB管理的角度入手,了解MongoDB管理所要了解的基本知识. 数据库命令 在前面几篇文章中,已经接触了一些数据 ...
- flexbox父盒子align-items属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- requests 安装
requests 是用来发送 HTTP 请求的一个库,requests 是对 urllib 和 urllib2 进行封装的一个模块,用来取代 urllib 和 urllib2,可以使用以下两种方法安装 ...
- VS无法导航到插入点F12失败
关闭VS 开启控制台并导航到Visual安装文件夹,例如C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\ID ...
- [Vim] 搜索模式(正则表达式)
本文介绍如何使用Vim的搜索模式. 搜索单词 Vim中使用 \< 和 \> 分别表示单词的开头和结尾,例如查找单词 i 而不是字母 i ,在正常模式下,按下 / 启动搜索模式,输入 \&l ...