如何从javascript变量保存png

我在javascript变量中有一个用base64编码的图像：

data:image/png；base64，base64数据

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

可能吗？怎么做

提前谢谢

致意

。。。没有向来访者询问任何事情。。。可能吗

不，那会是一个安全漏洞。如果可能的话，人们将能够毫不费力地将恶意软件写入最终用户的磁盘。您的最佳赌注可能是a（签名）。诚然，对其进行签名需要花费一点$$$（这样它就不会弹出安全警告），但它可以在未经最终用户许可的情况下将数据写入其磁盘。

这是不可能的

---

如果是这样的话，浏览器将非常不安全，能够在没有用户交互的情况下将随机数据写入硬盘。

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

---

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

使用javascript，您无法保存该文件。我能想到的唯一真正的可能性是java小程序，但也许（我不知道该图像应该保存多长时间）您可以简单地添加一个img标记，并使用png和强制缓存（但如果用户删除其缓存，图像将消失）。

正如其他答案所述，您不能仅使用javascript。如果需要，可以将数据（使用普通HTTP POST）发送到PHP脚本，调用

header（'Content-type:image/png'）

并使用

echo base64\u decode（$base64data）

将解码后的图像数据输出到页面

---

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

我认为您可以做一些事情（可能不仅仅是使用javascript…需要xul编程）。有一些Firefox插件可以将图像保存到文件夹中（请查看Firefox插件网站）

我知道这个问题已经存在了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触发点击事件，您需要按照中的说明进行操作。基本上：

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日，唯一完全支持

下载属性的浏览器是Chrome
 我很惊讶这里没有人提到使用HTML5 blob和几个漂亮的库

你首先需要和

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

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

把画布撕成一团

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不完全受支持，但至少您可以获得一个包含图像的单独页面

看看这个：

编辑：这与Safari/Mac不兼容。
您可以在服务器上将此文件设置为blob，并使用setTimeout函数来启动下载。
使用ActiveX将您限制为单一webbrowser类型（MSIE），甚至，MSIE的默认设置将在继续之前向最终用户发出各种安全警告。ActiveX，不，谢谢。很抱歉，但“我想你可以，去检查插件”不是答案。在Chrome中工作得很好，但在运行Google Chrome Frame的IE8中没有做任何事情。如果你使用的是jQuery，请使用
$（下载）。单击（）。如果您没有使用jQuery，请检查我认为这不适用于FF，即它甚至不会对事件做出反应，这可能会导致用户想知道发生了什么。我如何将其保存在目录中？回答非常好。使用非常简单。假设使用JS将编码数据绘制到画布上，并且图像没有以任何方式缓存在浏览器中------是否仍然可以转储画布（可能更好的说法是“复制”），然后以编程方式将其保存在浏览器的缓存中（或其他地方）？你有博客或其他联络点吗？（可能的咨询服务？）对不起，我不知道你如何才能做到这一点。谢谢！这让我省去了很多心痛。我已经访问了Blob和FileSaver.js，但不知道如何将它们组合在一起。好东西，你不能。你可以读这个。