Vue将页面中Echarts动态图导出Gif动图
首先，准备工作需要三个依赖的js
第一个js采用npm进行安装：
npm install html2canvas
第二个js采用下载放入项目中进行使用，下载链接：
https://pan.baidu.com/s/1YYVD3xRwOL91hecjJjiTOw
提取码：1234
第三个js采用下载放入项目中进行使用，
下载链接：https://pan.baidu.com/s/1Yozk4f-cw6CrkB4zKiaeAw
提取码：1234
好的，下载完成后，正式开始
- .在vue页面中要有容纳echart生成的dom节点
<div id="chartRoot">
</div>
- 在vue页面中引入，这里是关键点，只要引入成功，
调用downLoadGifImg()即可生成gif图
import html2canvas from "html2canvas";//采用npm依赖引入
import GIF from "@/js/base/gif.js";//gif图合并js（这里可以放入项目后更改引用路径）
import { getGifWorker } from "@/js/base/gifWorker.js";//gif图合并js（这里可以放入项目后更改引用路径）
- 在vue页面中，methods中声明生成Gif的函数方法
methods: {
//点击调用生成Gif图
downLoadGifImg(){
let time=10000;
var start = Date.now()
//time 为录制时长 毫秒
time = time || 0
let canvasDom = document.querySelector('#chartRoot canvas');//获取到渲染echarts的canvas元素
function loop(){
//html2canvas 可以执行指定dom元素屏幕截取，截取的图为回调参数canvas
html2canvas(canvasDom,{allowTaint: true}).then(function(canvas) {
gif.addFrame(canvas, {delay: 150});//将截取画布元素canvas添加进Gif.js的方法中，delay为一帧时长 150ms延时
if(Date.now() - start >= time){
gif.render();//渲染开始启动 导出gif
}else{
loop();//继续执行
}
});
}
//创建一个GIF实例
var gif = new GIF({
workers: 2,//启用两个worker。
quality: 10,//图像质量
workerScript: getGifWorker()
});
let that=this;
//gif渲染完成后执行的回调，即下载。
gif.on('finished', function(blob) {//最后生成一个blob对象
//下载动作
var el = document.createElement('a');
el.href = URL.createObjectURL(blob);
el.download = 'GIF信息图'; //设置下载文件名称
document.body.appendChild(el);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
el.dispatchEvent(evt);
document.body.removeChild(el);
});
loop();
}
}
- 最后在button加点击事件绑定downLoadGifImg()即可
例：<el-button @click="downLoadGifImg()" >点击生成Gif下载</el-button>
备注总结：
gif.js
gifWorker.js
这两个js用官网的下载后
在vue中不能直接使用（因为没有export方法等）
上方贴的百度网盘链接下载的是本人已经更改完成
在vue中可以使用的。
有关这几个用到的js在我的另一篇Blog中有更详细的介绍，这里就不详细介绍了 只列出了使用方法，有需要的可跳转查看
链接：点击跳转 https://blog.csdn.net/qq_43953273/article/details/120551807
