简介

该插件可将动图gif拆分。

使用

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

let gifimg = document.getElementById('one')// gif动图 dom
let superGif = new SuperGif({
  gif: gifimg
});
let is = false
superGif.load(function () {
  let arr = []
  // let material = new Cesium.ImageMaterialProperty({
  //   image: new Cesium.CallbackProperty(() => {
  //     let push = true
  //     arr.length > 0 && arr.forEach(v => {
  //       if (v === superGif.get_canvas().toDataURL('image/png')) {
  //         push = false
  //       }
  //     })
  //     if (push) arr.push(superGif.get_canvas().toDataURL('image/png'))
  //     if (arr.length == 25) { saveJSON(arr, 'gif'); is = true }
  //     return superGif.get_canvas().toDataURL('image/png');
  //   }, false),
  //   repeat: new Cesium.Cartesian2(1, 1)
  // });
  setInterval(() => {
    let push = true
    arr.length > 0 && arr.forEach(v => {
      if (v === superGif.get_canvas().toDataURL('image/png')) {
        push = false
      }
    })
    if (push) arr.push(superGif.get_canvas().toDataURL('image/png'))
    // console.log(arr.length)
    if (arr.length == 25) { saveJSON(arr, 'gif'); is = true }
  }, 100)
});

function saveJSON(data, filename) {
  if (is) return
  if (!data) {
    alert('保存的数据为空');
    return;
  }
  if (!filename)
    filename = 'json.json'
  if (typeof data === 'object') {
    data = JSON.stringify(data, undefined, 4)
  }
  var blob = new Blob([data], { type: 'text/json' }),
    e = document.createEvent('MouseEvents'),
    a = document.createElement('a')
  a.download = filename
  a.href = window.URL.createObjectURL(blob)
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  a.dispatchEvent(e)
}