canvas转成为图片并下载为本地图片文件

最新推荐文章于 2025-04-21 10:25:07 发布

lit_finger

最新推荐文章于 2025-04-21 10:25:07 发布

阅读量4.8k

点赞数 5

分类专栏： echarts&canvas 文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/lit_finger/article/details/122473481

版权

本文介绍如何将自绘的canvas图表转换为PNG图片并实现点击下载。借助Echarts的特性，结合canvas转base64和文件对象转换，通过a标签实现本地下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次需求为自绘的canvas图表，点击下载按钮后可获得当前视图的png图片

echarts官方配置里有个方法，可直接将图表下载成格式为png的图片文件，配置如下

得到的效果如下图，点击右上角的按钮即可下载为本地图片

这里我本地使用canvas模拟，实现和echarts下载图片一样的效果，html代码如下

<canvas id="chart" width="200" height="100"></canvas>
<button id="btn">下载</button>

以下为script代码片段，大致分三步

第一步，将canvas转换为base64的url

var can = document.getElementById("chart"); // 获取canvas元素
var cxt = can.getContext("2d"); // 创建context对象
cxt.fillStyle = "#f00"; // 填充色为红色
cx