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

时间:2012-12-31 11:25:33

标签: javascript html5 html5-canvas

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

2 个答案:

答案 0 :(得分:4)

使用canvas.toDataURL中的base64 URI作为链接的href以及download attribute

它应该类似于:

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

答案 1 :(得分:0)

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

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

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

article

DEMO