如何将 Canvas 保存为图片并下载至本地 | 您所在的位置:网站首页 › 使用Windows自带的程序截取网页上图像并设置成桌面 › 如何将 Canvas 保存为图片并下载至本地 |
在实际开发过程中,有时需要将图表或者地图等基于Canvas技术渲染的数据下载到本地保存到情况,下面介绍两种方法来完成这种功能。 一、a 标签法a 标签方法主要分为以下步骤: 将 canvas 元素的数据通过原生 api 转换成 base64 编码的图片格式 利用 a 标签设置 download 属性可以将 href 链接元素下载,我们将 a 标签的 href 属性值设置为上一步获得的 base64 格式字符串 构造一个单击事件并通过 api 触发 a 标签的 click 事件完成下载注意点:由于浏览器安全限制,事件触发的代码不能被异步代码包裹 以下为代码示例: index.html 下载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 标签法的优缺点: 优点:只使用浏览器提供的原生 API 就能实现我们的需求。 缺点:无法被异步代码包裹,也就是包含 Ajax 请求的情况下代码不生效。 缺点:对于分辨率过高的 canvas, 我们生成的 dataURL 过长,超过浏览器限制,可能会导致无法顺利下载,如出现此现象请参考下面介绍的方法。 二、saveAs 法使用这种方法我们需要用到一个三方库 FileSaver.js,该库实现了 HTML5 规范中的 saveAs 方法。 该方法的主要步骤如下: 通过 canvas 的 toBlob API 将数据转换为二进制格式。 通过 FileSaver.js 提供的 saveAs 方法对该二进制进行下载。下面是我们的实现: index.html 下载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 法的优缺点: 优点:基本不限制下载图片的大小(不超过本机内存) 缺点:需要引入第三方库 三、涉及的资料MDN a 标签的说明(包括 download 属性以及其限制):developer.mozilla.org/zh-CN/docs/… MDN 关于 toDataURL 说明: developer.mozilla.org/zh-CN/docs/… MDN 关于toBlob 说明:developer.mozilla.org/zh-CN/docs/… FileSaver.js Github 主页:github.com/eligrey/Fil… FilerServer.js NPM 仓库主页:www.npmjs.com/package/fil… canvas-toBlob Github 主页:github.com/eligrey/can… canvas-toBlob NPM 仓库主页:www.npmjs.com/package/can… 如果有不清楚的地方可以在评论中提出,我会及时作出解答,感谢阅读! |
CopyRight 2018-2019 实验室设备网 版权所有 |