从电子本地在HTML画布中保存图像?

时间:2017-03-16 00:02:05

标签: javascript canvas electron

我试图弄清楚如何从电子应用程序本地保存图像(png)。

我使用以下方法从画布中提取图像: my_canvas.toDataURL('image/png')

但我不确定如何将该文件本地保存到用户计算机。

或者,有没有办法让我只显示图像,以便他们可以右键单击以保存它(就像在普通浏览器中一样),因为我无法使其工作。

1 个答案:

答案 0 :(得分:-4)

我不知道您尝试了什么,但创建类似的链接应该有效:<a href="[the data url]" download="[whateverfilename.ext]" target="_blank">

像这样:

<a href="data:image/jpeg;base64,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"
  download="pangolin.jpg" target="_blank">Test me!</a>