2

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

4

2 回答 2

5

使用 base64 URI fromcanvas.toDataURL作为href链接，以及download 属性。

它应该看起来像：

<a href="data:image/png;base64,iVBORw0..." download="my-image">Save Image</a>
于 2012-12-31T11:32:44.917 回答
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。

文章

演示

于 2012-12-31T11:29:46.243 回答