h5使用canvas输出为gif动画图片
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。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对象的配置参数
| 参数 | 默认 | 描述 |
|---|---|---|
| repeat | 0 | 重复播放 -1 = 不重复, 0 = 重复 |
| quality | 10 | 图片质量越小越质量越好 |
| workers | 2 | number of web workers to spawn |
| workerScript | gif.worker.js | 原版请注意下路径,文章中的附件已经添加自动查找路径 |
| background | #fff | 当原图像为透明时进行替换的背景色 |
| width | null | 输出图片的宽 |
| height | null | 输出图片的高 |
| transparent | null | 原图片中要透明的十六进制颜色, 0x00FF00 = green |
| dither | false | dithering method, e.g. FloydSteinberg-serpentine |
| debug | false | 调试为true时会打印日志到console |
如果宽或者高为null的话就以添加的第一帧大小为准
要注意的一个地方使用canvas context这个添加图片数据的时候,如果是第一帧,则会因为没有初始化大小,而从context里也找不出来大小,所以会报错,正确方法是实例化GIF时传入宽高的配置,这样添加图片帧的三个方法使用才会正常
addFrame 参数
| 参数 | 默认 | 描述 |
|---|---|---|
| delay | 500 | 帧延时,设置为0时自动转成500 |
| copy | false | 复制像素数据 |
制作透明gif图片的方法
var gif = new GIF({
workers: 2,
quality: 10,
background: '#ffffff',//原透明色替换为白色
transparent: 0xffffff//把图片中的白色替换为gif的透明色
});使用addFrame添加图片数据的时候把背景设置成#ffffff白色,生成gif图片时图片中的白色就自动变成透明啦
