vue中利用gif.js实现GIF动图下载

不太聪明的派大星-xx

已于 2022-06-10 08:58:22 修改

阅读量4.7k

点赞数 2

文章标签： javascript vue.js 前端

于 2022-06-10 08:54:37 首次发布

本文链接：https://blog.csdn.net/weixin_43695894/article/details/125205715

版权

本文介绍了如何在Vue项目中解决gif.js不能通过npm安装的问题，通过本地引入和创建blobURL的方式启动worker，实现gif.js的正确使用。详细步骤包括下载资源、修改源码、导入gif.js和worker，并展示如何将多个canvas元素转换为GIF动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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);
      }
    },
}