h5使用canvas输出为gif动画图片

来源:赵克立博客 分类: HTML5 标签:canvasHTML5Canvas发布时间:2016-12-08 16:47:22最后更新:2017-09-25 11:29:52浏览:25473
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-09-25 11:29:52
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

使用h5的canvas提供的接口很容易实现一些动画,如果能把这些动画实现成gif动图就更好啦,还真有大神实现啦这个功能下面说明使用方法

开源库地址

https://github.com/jnordberg/gif.js

首先引入需要的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.rar


附录:创建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图片时图片中的白色就自动变成透明啦


备注:使用环境必须是在服务器环境下


微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python