建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS动图gif拆分插件libgif.js

来源:易助科技网浏览量:7收藏

简介


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