图片转成gif 变成base64

html2canvas   截屏的插件

http://jnordberg.github.io/gif.js/  GIF.js官网

<script src='https://imgss.github.io/demo/gif/gif.js'></script>

<script>

  var gif = new GIF({

  workers: 2,

  quality: 10,

  background: '#ffffff',//原透明色替换为白色

  transparent: 0xffffff//把图片中的白色替换为gif的透明色

  });

  // add a image element

  gif.addFrame(document.getElementById('img'),{copy: true});

  // or a canvas element

  // gif.addFrame(canvasElement, {delay: 200});

  // or copy the pixels from a canvas context

  // gif.addFrame(ctx, {copy: true});

  gif.on('finished', function(blob) {

    console.log(blobToDataURL(blob));

    // window.open(URL.createObjectURL(blob));

  });

  gif.render();

  const blobToDataURL = (blob) => {

  return new Promise((resolve, reject) => {

  let reader = new FileReader();

  reader.addEventListener('load', () => {

  resolve(reader.result); // reader.result即为包含文件内容的字符串

  });

  reader.readAsDataURL(blob);

  });

  };

</script>

 

 

 

 

 

 

 

 

 

使用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图片时图片中的白色就自动变成透明啦

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