Vue将页面中Echarts动态图导出Gif动图

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

好的，下载完成后，正式开始

1. .在vue页面中要有容纳echart生成的dom节点

<div id="chartRoot">

</div>

2. 在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（这里可以放入项目后更改引用路径）

3. 在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();
	}
}

4. 最后在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