是否可以使用只有Javascript将图像保存为图像？

Question

我正在研究QR码项目，并通过画布生成一些图像。所以他们实际上不是图像。用户不能通过点击“另存为”上下文菜单项来下载/保存。

如何让用户能够下载它？

Answer 1

假设你的“另存为”按钮，看起来像这样（未初始化，见下文）：

<a href="#" id="saveas" download="">Save as</a> 

然后，当您创建在画布上的QR代码执行下列操作以初始化：

/// QR created here.. 

var link = document.getElementById('saveas'); 

link.download = 'filename.png'; /// set a filename or a default 
link.href = canvas.toDataURL(); /// create a data-uri as link 

这里的关键是锚标签的新download属性。这将弹出一个保存为请求者而不是导航到图像。

您也可以选择隐藏链接并在初始化时显示它。你明白了......

Answer 2

var image = new Image(); 
image.src = canvas.toDataURL("image/png"); 
document.body.appendChild(image); // or whereever you want. 

编辑：onload事件处理程序只用于服务器加载图像。

Answer 3

//创建保存标签，然后

var data = canvas.toDataURL（）; //默认是png如果你想要 document.getElementById（'save'）。href = data;