【咸鱼教程】本地图片上传。动态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三个浏览器上不兼 ...
随机推荐
- Android应用坐标系统全面具体解释
1 背景 去年有非常多人私信告诉我让说说自己定义控件,事实上通观网络上的非常多博客都在讲各种自己定义控件,可是大多数都是授之以鱼.却非常少有较为系统性授之于渔的文章,同一时候由于自己也迟迟没有时间规划 ...
- zhuzher日志log
val log=sc.textFile("/data/logstash/data/*.log") val rowRDD2=log2.map(line=>(line.split ...
- 两个大数组foreach,找出相同的key数量,所用的时间对比
<?php function microtime_float() { list($usec, $sec) = explode(" ", microtime()); retur ...
- 【Deep Learning】RNN的直觉理解
https://ujjwalkarn.me/2016/08/11/intuitive-explanation-convnets/
- WebGL 浏览器函数
1.requestAnimationFrame(func) 请求浏览器在将来某时刻回调函数func以完成重绘.requestAnimationFrame()成功的一个关键是确定你在执行其他用户diam ...
- geoserver PostGIS的安装和使用
PostGIS是一个非常流行并且开源的具有空间分析能力的关系型数据库,它作为PostgreSQL数据库的一个插件.PostgreSQL是一个功能非常强大并且开源的关系型数据库.目前项目使用的版本为Po ...
- tomcat 重启报错unregister mbean error javax.management.InstanceNotFoundException
JAVA_OPTS='-Ddruid.registerToSysProperty=true' 多个应用部署到tomcat下需要在/bin/catalina.sh下添加上面这句话 添加位置在‘cygwi ...
- python带参装饰器的改良版
简单点就是这种 def deco2(param=1): def _deco2(fun): def __deco2(*args, **kwargs): print (param) fun(*args, ...
- SpringBoot------文件上传
1.pom.xml引入依赖配置 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- SpringMVC由浅入深day02_5数据回显_6异常处理器
5 数据回显 5.1 什么数据回显 表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 5.2 pojo数据回显方法 1.springmvc默认对pojo数据进行回显. po ...