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

2023-11-10

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • C语言运算符——自增与自减

    自增与自减 一个整数类型的变量自身加 1 可以这样写 a a 1 或者a 1 不过 C语言还支持另外一种更加简洁的写法 就是 a 或者 a 这种写法叫做自加或自增 意思很明确 就是每次自身加 1 相应的 也有a 和 a 它们叫做自减 表示自
  • 功能测试数据测试之数据测试关注点

    数据类型 常见数据类型 整型 浮点型 字符型 布尔型等 可用等价类方法对输入数据类型设计测试用例 数据长度 数据长度可能是固定长度或者是在某个范围内的长度 可用等价类和边界值方法对数据长度设计测试用例 数据一致性 组织数据测试该交易 在交易
  • Fatal Python error: init_sys_streams: can‘t initialize sys standard streamsPython runtime state: 问题

    哈喽 大家好 我是 奇点 江湖人称 singularity 刚工作几年 想和大家一同进步 一位上进心十足的 Java ToB端大厂领域博主 喜欢java和python 平时比较懒 能用程序解决的坚决不手动解决 如果有对 java 感兴趣的

随机推荐

  • canvas绘制火柴人

  • 每日面试题day02

    1 int 和 Integer 有什么区别 int 是基本数据类型 Integer 是其包装类 注意是一个类 在 java 中包装类 用途比较多的是用在于各种数据类型的转化中 2 重载和重写的区别 overload 重载 参数类型 个数 顺
  • vue3如何进行数据监听watch/watchEffect

    我们都知道监听器的作用是在每次响应式状态发生变化时触发 在组合式 API 中 我们可以使用 watch 函数和watchEffect 函数 当你更改了响应式状态 它可能会同时触发 Vue 组件更新和侦听器回调 默认情况下 用户创建的侦听器回
  • IntelliJ IDEA Plugins加载太慢_IntelliJ IDEA Plugins搜不出来【已解决】

    问题 IntelliJ IDEA Plugins加载太慢或者IntelliJ IDEA Plugins搜不出来 解决方案
  • html form 表单

    定义 form 表单在网页中主要负责数据采集功能 属于一个容器标记 表单组成 一个表单由 form元素 表单控件 和 表单按钮 组成 1 form元素 form元素用来创建表单 语法格式如下
  • SQL中根据经纬度计算两点之间的直线距离

    最近接到一个需求获取当前用户的经纬度 然后计算与目标地的的距离 我自己也是看别人的博客学习 自己也做个记录吧 直接放出计算的公式 不想浪费时间的 直接看公式套进去就成 依次是纬度 纬度 经度 round 6378 138 2 ASIN SQ
  • vue显示PDF文件

    小编最近接手的项目中 有个需求 前端显示后端返回的PDF格式的文件 经过小编两天的调研和试验 终于找到了一个比较好的插件方法 直接贴代码 1 安装 npm i vue pdf signature save dev 2 pdfShow vue
  • 一个测试的成长历程【功能测试篇】——web测试的总结

  • js自写发布订阅模块

    实现效果如下图所示 代码如下
  • 【论文阅读】文献阅读笔记-泊松重建

    先了解泊松分布 就二项分布而言 泊松分布可以是二项分布的推广 样本数趋向于无穷大 而事件发生的概率趋近于0时 此时期望满足np Lamda 常数 且此时事件发生的概率满足泊松分布 且概率的计算只与Lamda有关 但泊松方程和泊松分布没啥关系
  • 微信小程序实现扫二维码时仿微信扫码音效

    需求分析 使用wx scanCode时无交互感 对用户来说没有反馈 故增加扫码成功时震动及播放微信扫码音效 index html
  • 一些关于c语言if语句的练习

    练习题1 在终端输入一个整数 用来表示学生的成绩 输出学生成绩对应的等级 90 100 A 80 90 B 70 80 C 60 70 D 0 60 不及格 练习题2 在终端输入一个整数 用来表示年份 输出这一年是平年还是闰年 闰年 能被4
  • 联盟链FISCO BCOS网络端口讲解

    FISCO BCOS是完全开源的联盟区块链底层技术平台 由金融区块链合作联盟 深圳 简称金链盟 成立开源工作组通力打造 开源工作组成员包括博彦科技 华为 深证通 神州数码 四方精创 腾讯 微众银行 亦笔科技和越秀金科等金链盟成员机构 代码仓
  • IDEA 查看源码快捷键

    一 快捷键 快捷键 功能 Ctrl Shift i 出现类似于预览的小窗口 Ctrl Enter 接上步 完全打开源码 Ctrl 鼠标左键 一步到位打开源码 Ctrl Shift i gt Ctrl Enter IDEA 2018版 实用快
  • 使用Canal实现mysql binlog增量订阅数据

    前言 是由公司业务改造搜索功能 使用ES搜索引擎中间件 那么我们需要将mysql中的数据同步至ES服务中 最总选择使用alibaba的canal增量订阅和解析工具 简单原理 canal模拟mysql slave的交互协议 伪装自己为mysq
  • 使用Java操作excel的几种方法

    在平时的业务系统开发中 少不了需要用到导出 导入excel功能 今天我们就一起来总结一下 下面给大家介绍一下几种常用方法 apache poi easypoi easyexcel 文章目录 一 Apache poi 1 1 首先添加依赖 1
  • 动态IP代理是什么?一文看懂动态代理IP

    一 什么是动态IP代理 动态IP代理是一种代理服务 而动态IP是由ISP动态分配给用户的IP地址 这些IP地址会周期性地更改 每次链接互联网时 用户会被分配一个新的IP地址 因而也称为 轮换IP IP地址轮换是一个过程 您的IP 地址 网络
  • 【深入浅出深度学习】1、深度学习的发展

    人工智能 机器学习 深度学习的关系 1 人工智能 机器推理 利用计算机构建具有人类智力特征的复杂机器 即为通用人工智能或强人工智能 即让机器拥有人类的所有感觉 所有理智 像人类一样思考 要实现真正意义上的人工智能可能还有很长的路 但是在一些
  • Linux 进程异常退出 如何查看日志

    当进程异常退出时 可以通过以下步骤来查看日志 找到进程的 PID 进程 ID 可以通过 ps 命令来查看 ps aux grep lt 进程名称 gt 找到进程的日志文件 一般情况下 进程的日志文件都会被记录在 var log 目录下 可以
  • 将Echart的canvas动画导出为.gif进行下载,有Demo

    JS前端下载导出Echart的动画为 gif图 实现方式为 html2canvas js gif js gif worker js 下载html2canvas js引入项目中 官网 html2canvas js 官网 2 下载gif js引