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

最新推荐文章于 2025-09-17 14:52:05 发布

原创最新推荐文章于 2025-09-17 14:52:05 发布 · 5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

echarts&canvas 专栏收录该内容

1 篇文章

订阅专栏

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

本次需求为自绘的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"; // 填充色为红色
cxt.fillRect(10,10,100,70); // 填充一个矩形，起始点坐标为10,10。宽高分别为100,70

// 以上获得一个canvas图形

// 接下来将canvas转换成base64的url
var url = can.toDataURL("image/png"); // 该方法获得的base64和上面提到echarts的API得到的一样
// 注意该方法属于canvas元素，而不是创建的context对象

第二步，将base64转换为文件对象（此步骤摘自 https://www.cnblogs.com/linfblog/p/12150719.html ）

var arr = url.split(","),
    mime = arr[0].match(/:(.*?);/)[1], // 此处得到的为文件类型
    bstr = atob(arr[1]), // 此处将base64解码
    n = bstr.length,
    u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}

// 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
var file = new File([u8arr], "filename", { type: mime });

第三步，将文件对象通过a标签下载

var aDom = document.createElement("a"); // 创建一个 a 标签
aDom.download = file.name; // 设置文件名
let href = URL.createObjectURL(file); // 将file对象转成 UTF-16 字符串
aDom.href = href; // 放入href
document.body.appendChild(aDom); // 将a标签插入 body
aDom.click(); // 触发 a 标签的点击
document.body.removeChild(aDom); // 移除刚才插入的 a 标签
URL.revokeObjectURL(href); // 释放刚才生成的 UTF-16 字符串

以上为整个下载为图片的流程，将三个步骤的代码放入按钮的点击事件即可