JS动图gif拆分插件libgif.js

简介

libgif.js可将动图gif拆分，可以用于读取和写入GIF格式图像。该插件提供了一组函数，可以轻松地操作GIF格式图像，比如裁剪、缩放、旋转、透明化等，实现了对GIF格式更加细粒度的控制。在网页设计中，我们通常使用它来读取GIF文件，并在网页上展示动态图像。

使用

1.  引入文件

<script src="http://gifjs.googlecode.com/svn/trunk/libgif.js"></script>

2.  HTML

<img id="my-gif" src="path/to/my/gif/file.gif">

3.  调用

var myGif = document.getElementById("my-gif"); // 获取需要展示的元素
var rawGif = new XMLHttpRequest(); // 创建XMLHttpRequest对象
rawGif.open('GET', myGif.getAttribute('src'), true); // 发送GET请求
rawGif.responseType = 'arraybuffer'; // 设置响应类型为二进制数据
rawGif.onload = function(e) { // 加载响应后
  var gif = new GIF(rawGif.response); // 使用libgif库解析GIF文件
  gif.set_canvas(myGif); // 设置展示画布
  gif.play(); // 播放GIF动画
};
rawGif.send(null); // 发送请求

在这段代码中，我们首先获取需要展示的元素，并创建一个XMLHttpRequest对象。然后，我们发送一个GET请求来获取GIF文件，并将响应类型设置为二进制数据。在响应加载完成后，我们使用libgif库解析GIF文件，并将展示画布设置为需要展示的元素。最后，我们使用gif.play()函数来播放GIF动画。

4.  其他用法

拆分gif动图并导出保存为json格式文件

viewer = new Cesium.Viewer('cesiumContainer');
let gifimg = document.getElementById('one')//gif图片
let superGif = new SuperGif({
  gif: gifimg
});
superGif.load(function () {
  let material = new Cesium.ImageMaterialProperty({
    image: new Cesium.CallbackProperty(() => {
      return superGif.get_canvas().toDataURL('image/png');
    }, true),
    repeat: new Cesium.Cartesian2(1, 1)
  });
  viewer.entities.add({
    id: 'tttt',
    name: 'a',
    type: "marker",
    position: Cesium.Cartesian3.fromDegrees(120, 30, 0),
    ellipse: {
      semiMinorAxis: 150000.0,
      semiMajorAxis: 150000.0,
      material
    },
    label: {
      text: 'gif纹理',
      font: '20px 微软雅黑',
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      outlineColor: new Cesium.Color.fromCssColorString("tranparent"),
      fillColor: new Cesium.Color.fromCssColorString("#fff"),
      scaleByDistance: new Cesium.NearFarScalar(1.5e2, 2.0, 1.5e7, 0.5),//控制缩放
      outlineWidth: 5,
      verticalOrigin: Cesium.VerticalOrigin.CENTER,
    },
  })
});

相关链接

GitHub 地址 ：  https://github.com/buzzfeed/libgif-js