将 Canvas 保存为图片并下载至本地

在实际开发过程中，有时需要将图表或者地图等基于Canvas技术渲染的数据下载到本地保存到情况，下面介绍两种方法来完成这种功能。

一、a 标签法

a 标签方法主要分为以下步骤：

1. 将 canvas 元素的数据通过原生 api 转换成 base64 编码的图片格式
2. 利用 a 标签设置 download 属性可以将 href 链接元素下载，我们将 a 标签的 href 属性值设置为上一步获得的 base64 格式字符串
3. 构造一个单击事件并通过 api 触发 a 标签的 click 事件完成下载

注意点：由于浏览器安全限制，事件触发的代码不能被异步代码包裹

---

以下为代码示例：

index.html

<!-- 待下载对 canvas 元素 -->
<!-- 移动端可能会由于 viewport 的原因导致下载的图片不清晰，我们可以在 canvas 标签上直接设置 width 和 height 属性，不采用 style 中的 width 和 height, 相当于设置内部分辨率 -->
<canvas id="chart" width="1920" height="1080"></canvas>

<!-- 触发下载操作的按钮 -->
<button onclick="download('#chart')">下载</button>

download.js

function download(selector) {
  // 通过 API 获取目标 canvas 元素
  const canvas = document.querySelector(selector);

  // 创建一个 a 标签，并设置 href 和 download 属性
  const el = document.createElement('a');
  // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
  el.href = canvas.toDataURL();
  el.download = '文件名称';
  
  // 创建一个点击事件并对 a 标签进行触发
  const event = new MouseEvent('click');
  el.dispatchEvent(event);
}

下面我们总结下 a 标签法的优缺点：

1. 优点：只使用浏览器提供的原生 API 就能实现我们的需求。
2. 缺点：无法被异步代码包裹，也就是包含 Ajax 请求的情况下代码不生效。
3. 缺点：对于分辨率过高的 canvas, 我们生成的 dataURL 过长，超过浏览器限制，可能会导致无法顺利下载，如出现此现象请参考下面介绍的方法。

二、saveAs 法

使用这种方法我们需要用到一个三方库 FileSaver.js，该库实现了 HTML5 规范中的 saveAs 方法。

该方法的主要步骤如下：

1. 通过 canvas 的 toBlob API 将数据转换为二进制格式。
2. 通过 FileSaver.js 提供的 saveAs 方法对该二进制进行下载。

---

下面是我们的实现：

index.html

<!-- 通过 CDN 引入 FileSaver.js -->
<!-- 我们也可以通过 npm 引入 https://www.npmjs.com/package/file-saver
 -->
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<!-- 待下载对 canvas 元素 -->
<canvas id="chart" width="1920" height="1080"></canvas>
<!-- 触发下载操作的按钮 -->
<button onclick="download('#chart')">下载</button>

download.js

function download(selector) {
  // 通过 API 获取目标 canvas 元素
  const canvas = document.querySelector(selector);
  // 如果 toBlob 方法出现兼容性问题建议引入 https://github.com/eligrey/canvas-toBlob.js
  canvas.toBlob(function(blob) {
    saveAs(blob, '文件名称')
  });
}

下面我们总结下 saveAs 法的优缺点：

1. 优点：基本不限制下载图片的大小（不超过本机内存）
2. 缺点：需要引入第三方库

三、涉及的资料

• MDN a 标签的说明（包括 download 属性以及其限制）：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

• MDN 关于 toDataURL 说明： https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

• MDN 关于toBlob 说明：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

• FileSaver.js Github 主页：https://github.com/eligrey/FileSaver.js

• FilerServer.js NPM 仓库主页：https://www.npmjs.com/package/file-saver

• canvas-toBlob Github 主页：https://github.com/eligrey/canvas-toBlob.js

• canvas-toBlob NPM 仓库主页：https://www.npmjs.com/package/canvas-toBlob

如果有不清楚的地方可以在评论中提出，我会及时作出解答，感谢阅读！