如何从javascript变量中保存png答案

【问题标题】：How to save a png from javascript variable如何从javascript变量中保存png
【发布时间】：2011-04-23 19:08:52
【问题描述】：

我在 javascript 变量中有一个用 base64 编码的图像：data:image/png;base64, <em>base64 data</em>

[编辑] 我需要将该文件保存到磁盘而不要求访问者右键单击 [/编辑]

有可能吗？怎么样？

提前致谢

最好的问候

【问题讨论】：

你不能。你可以阅读这个post。

标签： javascript image save

【解决方案1】：

我知道这个问题已有 2 年历史了，但希望人们会看到此更新。

您可以提示用户将图像保存为 base64 字符串（并设置文件名），而无需要求用户执行右键单击

var download = document.createElement('a');
download.href = dataURI;
download.download = filename;
download.click();

例子：

var download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();

为了使用 Firefox 触发点击事件，您需要按照this SO answer 中的说明进行操作。基本上：

function fireEvent(obj,evt){
  var fireOnThis = obj;
  if(document.createEvent ) {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent( evt, true, false );
    fireOnThis.dispatchEvent( evObj );
  } else if( document.createEventObject ) {
    var evObj = document.createEventObject();
    fireOnThis.fireEvent( 'on' + evt, evObj );
  }
}
fireEvent(download, 'click')

截至 2013 年 3 月 20 日，唯一完全支持 download 属性的浏览器是 Chrome。 Check the compatibility table here

【讨论】：

在 Chrome 中完美运行，但在使用 Google Chrome Frame 运行的 IE8 中没有做任何事情。
如果您使用 jQuery，请使用 $(download).click()。如果您不使用 jQuery，请检查 this other SO question
我认为这不适用于 FF、IE。它甚至不会对事件做出反应，这可能会导致用户想知道发生了什么。
如何将其保存在目录中？
很棒的答案。使用非常简单。

【解决方案2】：

...无需向访客询问任何内容...有可能吗？

不，那将是一个安全漏洞。如果可能的话，人们将能够在不经请求的情况下将恶意软件写入最终用户的磁盘。您最好的选择可能是（签名）Java Applet。诚然，签署它需要花费一点美元（这样它就不会弹出安全警告），但它能够在未经最终用户许可的情况下将数据写入最终用户的磁盘。

【讨论】：

【解决方案3】：

我很惊讶这里没有人提到将 HTML5 blob 与几个不错的库一起使用。

您首先需要https://github.com/eligrey/FileSaver.js/ 和https://github.com/blueimp/JavaScript-Canvas-to-Blob。

然后您可以将图像加载到画布中

base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

画布变成一个blob

var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);

最后保存

x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");

FF 不完全受支持，但至少你会得到一个包含图像的单独页面。

看看这个：http://jsfiddle.net/khhmm/9/

编辑：这与 Safari / Mac 不兼容。

【讨论】：

假设 JS 用于将编码数据绘制到画布上，并且图像没有以任何方式缓存在浏览器中-----是否仍然可以转储画布（也许“重复”会是一个更好的术语）然后以编程方式将其保存在我的浏览器的缓存中（或其他地方）？你有博客或其他联系点吗？（可能的咨询报价？）
抱歉，我不确定您如何实现这一点。
谢谢！这让我省了很多心痛。我已经使用了 Blob 和 FileSaver.js，但不知道如何将它们组合在一起。很棒的东西。

【解决方案4】：

正如其他答案已经说明的那样，您不能仅使用 javascript 来做到这一点。如果需要，可以将数据（使用普通 HTTP POST）发送到 PHP 脚本，调用 header('Content-type: image/png') 并使用 echo base64_decode($base64data) 将解码后的图像数据输出到页面。

这就像用户单击图像并打开它或提示他将文件保存到磁盘（普通浏览器的保存文件对话框）一样工作。

【讨论】：

【解决方案5】：

这是不可能的。

如果是这样，浏览器将非常不安全，无需用户交互即可将随机数据写入您的硬盘。

【讨论】：

【解决方案6】：

使用 javascript，你不能。我能想到的唯一真正的可能性是 java-applet，但也许（我不知道该图像应该保存多长时间）你可以简单地添加一个 img-tag 和 png 并 强制缓存（但如果用户删除了他的缓存，图片就会消失）。

【讨论】：

【解决方案7】：

如果你使用 ActiveX，我认为 JavaScript 是可能的。

另一种可能性是让服务器使用不同的 mime 类型输出该文件，以便浏览器要求用户保存它。

【讨论】：

使用 ActiveX 会限制您使用单一的网络浏览器类型 (MSIE)，即便如此，MSIE 在其默认设置中会在继续之前用各种安全警告吓唬最终用户。 ActiveX，不用了。

【解决方案8】：

我认为你可以做一些事情（也许不仅需要 javascript...xul 编程）。有 Firefox 插件可以将图像保存到文件夹中（查看 Firefox 插件站点）

【讨论】：

对不起，“我想你可以，去检查插件”不是答案。

【解决方案9】：

您可以将此文件设置为服务器上的 blob，并使用 setTimeout 函数来触发下载。

【讨论】：