前言

gif.js可以将帧图或者canvas拼成新的gif，gif.js没有npm install的库，引用方式如下：

1. 下载资源

首先从官方仓库上下载代码，worker不能跨域，所以资源必然是放在本地的。下载后可以放在public/全局引入，但会污染公共资源，所以不采取这样做。

下载资源后，将dist目录下的dist/gif.js 本体和对应的处理 worker 文件 dist/gif.worker.js ，拷贝放在目录引用的文件夹处。
注：将两个代码中的最后一行 sourceMap url 删除，这样可以不需要将dist目录下的map文件拷贝。

2. 本地引入方法（vue项目）

在使用gif进行GIF动画生成的文件中：

import GIF from '../../../static/gif/gif';

worker引入：
在gif.js源码中可以看到，启动Worker方式是直接传入了options.workerScript

借助 Worker 可以用 blob url 方式启动的特性（详见 MDN Worker ），手动把 worker 构造出来 blob url 即可。
将 gif.worker.js 的代码部分（除去注释），全部用反引号包起来变成纯文本，之后变为一个变量，然后在这个文件最下面添加函数，手动构造 blob url ：

export const gifWorkerContent = `(function e(t, n, r){...}`
export const getGifWorker = () => {
  const blob = new Blob([gifWorkerContent]);
  return window.URL.createObjectURL(blob);
};

最后在使用的地方明确指明 workerScript 为 blob url 即可：

import GIF from '../../../static/gif/gif';
import { getGifWorker } from '../../../static/gif/gif.worker';
export default {
mounted(){
	const { width, height } =
          this.$parent.$refs.downRef.getBoundingClientRect();
        let gif = new GIF({
          workers: 2,
          quality: 10,
          width,
          height,
          workerScript: getGifWorker(), //自定义worker地址
        });
     }
  }

上述方法就可以解决gif.js不能npm引入的问题，并且不污染/public，可以进行单独管理，并且避免了worker的同域问题。

3. 利用gif.js将canvas绘制成动图

methods: {
	toGif() {
      let imgEle1 = document.getElementById('img1');
      let imgEle2 = document.getElementById('img2');
      let imgEle3 = document.getElementById('img3');
      let imgEle4 = document.getElementById('img4');
      let imgEle5 = document.getElementById('img5');
      this.imgs = [imgEle1, imgEle2, imgEle3, imgEle4, imgEle5];
      // 生成GIF
      try {
        const { width, height } =
          this.$parent.$refs.downRef.getBoundingClientRect();
        let gif = new GIF({
          workers: 2,
          quality: 10,
          width,
          height,
          workerScript: getGifWorker(), //自定义worker地址
        });

        // 对所有的图片进行处理，利用canvas绘制图片
        this.imgs.forEach((img) => {
          const cv = document.createElement('canvas');
          cv.width = width;
          cv.height = height;
          let ctx = cv.getContext('2d');
          ctx.fillStyle = '#fff';
          ctx.fillRect(0, 0, width, height);
          ctx.drawImage(img, 20, 10, img.width, img.height);
          gif.addFrame(cv, { delay: 200 });
        });
        // 渲染gif
        gif.render();
        //图片合成后
        gif.on('finished', (blob) => {
          let a = document.createElement('a');
          a.href = URL.createObjectURL(blob);
          a.download = 'test.gif';
          a.click();
          gif.abort();
        });
      } catch (error) {
        console.log(error);
      }
    },
}