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

前言

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];// 生成GIFtry {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 });});// 渲染gifgif.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);}},
}

vue中利用gif.js实现GIF动图下载相关推荐

html 全景图three,vue中利用three.js实现全景图的完整示例
粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: ...
Vue中利用moment.js(时间格式化插件)做一个倒计时组件
moment.js 文档:https://momentjs.com/docs/#/-project-status/ 1.使用npm安装moment npm install moment --save ...
vue中利用echarts写一个飞机行径图
先写一个盒子盛放地图后面改进的图 <div class="com-container"><div class="com-chart" id ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法作者:高玉涵时间:2022.7.20 ...
php 输出图片给js,如何在php中利用croppic.js对图片进行剪切并上传
如何在php中利用croppic.js对图片进行剪切并上传发布时间:2021-01-30 16:41:02 来源:亿速云阅读:92 作者:Leah 这篇文章将为大家详细讲解有关如何在php中利用c ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...

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

前言

vue中利用gif.js实现GIF动图下载相关推荐

最新文章

热门文章