图片转成gif 变成base64
html2canvas 截屏的插件
http://jnordberg.github.io/gif.js/ GIF.js官网
使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦,还真有大神实现啦这个功能下面说明使用方法
开源库地址
首先引入需要的js文件gif.js在页面里自己创建一个canvas并且在它上面画一些动画
js附件在后面下载
然后就是gif的使用方法啦var gif = new GIF({
workers: 2,
quality: 10
});
// 添加一个图片标签对象像素到当前帧
gif.addFrame(imageElement);
//或添加一个canvas对象的像素到当前帧
gif.addFrame(document.getElementsByTagName('canvas')[0], {
delay: 200
});
gif.addFrame(document.getElementsByTagName('canvas')[0], {
delay: 200
});
gif.addFrame(document.getElementsByTagName('canvas')[0], {
delay: 200
});
//从canvas context复制像素到当前帧
gif.addFrame(ctx, {
copy: true
});
//合成图片成功后
gif.on('finished', function(blob) {
window.open(URL.createObjectURL(blob));
});
//渲染图片
gif.render();
附录:创建GIF对象的配置参数参数默认描述repeat0重复播放 -1 = 不重复, 0 = 重复
quality10图片质量越小越质量越好
workers2number of web workers to spawn
workerScriptgif.worker.js原版请注意下路径,文章中的附件已经添加自动查找路径
background#fff当原图像为透明时进行替换的背景色
widthnull输出图片的宽
heightnull输出图片的高
transparentnull原图片中要透明的十六进制颜色, 0x00FF00 = green
ditherfalsedithering method, e.g. FloydSteinberg-serpentine
debugfalse调试为true时会打印日志到console
如果宽或者高为null的话就以添加的第一帧大小为准
要注意的一个地方使用canvas context这个添加图片数据的时候,如果是第一帧,则会因为没有初始化大小,而从context里也找不出来大小,所以会报错,正确方法是实例化GIF时传入宽高的配置,这样添加图片帧的三个方法使用才会正常
addFrame 参数参数默认描述delay500帧延时,设置为0时自动转成500
copyfalse复制像素数据
制作透明gif图片的方法var gif = new GIF({
workers: 2,
quality: 10,
background: '#ffffff',//原透明色替换为白色
transparent: 0xffffff//把图片中的白色替换为gif的透明色
});
使用addFrame添加图片数据的时候把背景设置成#ffffff白色,生成gif图片时图片中的白色就自动变成透明啦
备注:使用环境必须是在服务器环境下
最新文章
- 火狐浏览器URL中传中文参数乱码问题
- hihoCoder#1135
- 【LR】关于宽带与比特之间的关系
- (转载)delphi 把图片存入数据库
- js iframe 跳转
- web开发——水到渠成
- JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
- spring boot整合redis
- 从 HelloWorld 看 Java 字节码文件结构
- Python内置函数(2)——divmod
- linux下的/dev/shm/ 以及与swap目录的区别【转】
- 从零学习Fluter(四):Flutter中ListView组件系列详展
- vue.js的学习
- Linux 设备树的解释 - DTB文件格式【转】
- Storm常见模式——流聚合
- PHP unset()函数销毁变量
- RxJava1升级到RxJava2的注意事项
- Kettle 使用入门
- 在ASP.NET Core2上操作MongoDB就是能这么的简便酷爽(自动完成分库分表)
- Oracle锁处理、解锁方法