JS前端下载导出Echart的动画为.gif图
实现方式为:html2canvas.js 、 gif.js、gif.worker.js
- 下载html2canvas.js引入项目中 官网:html2canvas.js 官网
2. 下载gif.js引入项目中 官网:gif.js 地址
3. 为了方便展示,这里我新建了个文件夹放入,就当是一个项目了
4. 这里直接实现了,大家需要直接下载demo源码查看,文章结尾会有一些注释
5. 这个demo用的是echarts官网的示例:echarts官网示例
6. ↓图为实现生成的gif效果图
7. 项目demo下载地址(我把项目放在了tomcat里)
链接:https://pan.baidu.com/s/1D7eS4DDsYodLzg6rlS1BbQ
提取码:1234
8. 下载完成后,解压到本地磁盘中,双击startup.bat来启动tomcat
9. 启动tomcat后,在本地浏览器访问就能看见效果了
http://localhost:8080/gifToEchart/test.html
10. 启动tomcat后,在浏览器访问就能看见效果了
源码放在webapp下
11. 对代码的一些注释及说明
注意:目前本地无法查看gif生成的效果(会报错),这个能解决的话,本地肯定也可以
注意:目前只能放在tomcat服务器上(正常生成下载gif且不报错)。
vue版本的没有问题,点击跳转
https://blog.csdn.net/qq_43953273/article/details/121085281
参考blog:
主要的参考:
https://segmentfault.com/q/1010000022153818
https://blog.csdn.net/xw505501936/article/details/80017776