GIFEncoder.js 纯 JavaScript HTML5 到（动画）GIF 的转换

GIFEncoder.js是一个JavaScript库，它能够将一系列帧或者动画编码为GIF格式的图像。它提供了一些功能和方法，方便开发者通过代码生成GIF动画。
Github源码地址

以下是一些GIFEncoder.js的功能介绍：
动画帧生成：你可以通过GIFEncoder.js创建一个帧序列，然后将每一帧添加到序列中。
自定义参数：你可以设置GIF动画的参数，例如帧率、循环次数、透明颜色等。
帧优化：GIFEncoder.js可以进行帧优化，减小图像文件的大小，同时保持动画的质量。
支持多种输入：GIFEncoder.js可以处理多种输入类型，包括图像对象、画布或者像素数据等。
跨平台兼容性：GIFEncoder.js可以在各种设备和浏览器上运行，包括桌面和移动设备。
查看案例>>   下载案例源码>>

<script src="js/b64.js"></script>
<script src="js/LZWEncoder.js"></script>
<script src="js/NeuQuant.js"></script>
<script src="js/GIFEncoder.js"></script>
<canvas id="bitmap"></canvas>
<img id="image">
<script>
  var canvas = document.getElementById('bitmap');
  var context = canvas.getContext('2d');

  var my_gradient = context.createLinearGradient(0, 0, 300, 0);
  my_gradient.addColorStop(0, "black");
  my_gradient.addColorStop(1, "white");


  context.fillStyle = my_gradient//"rgb(255,255,255)";  
  context.fillRect(0,0,canvas.width, canvas.height); //GIF can't do transparent so do white



  var encoder = new GIFEncoder();
  encoder.setRepeat(0);  // 0代表无限循环 auto-loop
  encoder.setDelay(500); // 每帧之间的延迟时间为200ms
  // encoder.setQuality(0.1); //设置GIF分辨率越小越清楚
  console.log(encoder)
  console.log(encoder.start());

  
  
  context.fillStyle = "rgb(200,0,0)";  
  context.fillRect (10, 10, 75, 50);  
  console.log(encoder.addFrame(context));
  context.fillStyle = "rgb(20,0,200)";  
  context.fillRect (30, 30, 55, 50);  
  console.log(encoder.addFrame(context));
  encoder.finish();
  document.getElementById('image').src = 'data:image/gif;base64,'+encode64(encoder.stream().getData())
 
</script>