Question

我在javascript变量中使用base64编码了一个图像：data:image/png;base64, base64 data

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

有可能吗？怎么样？

提前致谢

祝你好运

Answer 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

Answer 2

...没有向访客询问任何问题......有可能吗？

不，那可能是一个安全漏洞。如果可能，那么就可以将恶意软件写入最终用户的磁盘中。您最好的选择可能是（签名）Java Applet。没错，它需要花费一点点才能签名（因此它不会弹出安全警告），但它能够在未经许可的情况下将数据写入最终用户的磁盘。

Answer 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不兼容。

Answer 4

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

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

Answer 5

这是不可能的。

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

Answer 6

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

Answer 7

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

Answer 8

如果您使用ActiveX，我认为可以使用JavaScript。

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

Answer 9

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

如何从javascript变量中保存png

9 个答案: