将Echart的canvas动画导出为.gif进行下载,有Demo

该博客介绍了如何利用html2canvas.js和gif.js库将Echarts的动画转换并下载为.gif图片。通过下载提供的demo源码,在本地Tomcat服务器上运行,可以预览和下载生成的gif效果。参考了SegmentFault和CSDN上的相关教程,但注意本地运行可能出现错误,推荐在服务器环境下操作。
摘要由CSDN通过智能技术生成

JS前端下载导出Echart的动画为.gif图

实现方式为:html2canvas.js 、 gif.js、gif.worker.js

  1. 下载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

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值