如何从 HTML5 画布将图像另存为磁盘答案

【问题标题】：How can save as image to disk from HTML5 canvas如何从 HTML5 画布将图像另存为磁盘
【发布时间】：2012-12-15 13:47:12
【问题描述】：

我有一张画在画布上的图像。我的页面中有一个另存为 html 输入按钮。当我单击此按钮时，它应该显示一个另存为对话框，我必须将此图像以 jpeg 格式保存在磁盘上。如何使用 javascript 实现此功能？

【问题讨论】：

stackoverflow.com/questions/7951326/…

标签： javascript html html5-canvas

【解决方案1】：

使用 eligrey polyfill 将图像保存到磁盘。

W3C 文件 API 包含一个 FileSaver 接口，它可以像 saveAs(data, filename) 一样简单地保存生成的数据，但不幸的是，它最终会从规范中删除。 a JavaScript library called FileSaver.js，在所有现代浏览器中实现 FileSaver。现在可以在浏览器中生成您想要的任何类型的文件，文档编辑器可以拥有一个不依赖在线连接的即时保存按钮。当与标准 HTML5 canvas.toBlob() 方法配合使用时，FileSaver.js 可以让您立即保存画布并为其指定文件名，这对于 HTML5 图像编辑 web 应用非常有用。

对于尚不支持 canvas.toBlob() 的浏览器，请使用 canvas-toBlob.js.

article

DEMO

【讨论】：

它不适用于10版本以下的ie浏览器。我需要一个 javascript 解决方案
阅读eligrey文章完全支持所有现代浏览器。
@kiranpalode 你明白了吗？

【解决方案2】：

使用来自canvas.toDataURL 的base64 URI 作为链接的href，以及download attribute。

它应该看起来像：

<a href="data:image/png;base64,iVBORw0..." download="my-image">Save Image</a>

【讨论】：