如何从javascript变量中保存png

Question

我有一个在base64中用javascript变量编码的图像: 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触发点击事件,您需要执行此SO答案中的说明.基本上:

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.在此处查看兼容性表

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不兼容.