Javascript 如何从javascript变量保存png
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3906142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to save a png from javascript variable
提问by hotips
I have an image encoded in base64 in a javascript variable : data:image/png;base64, base64 data
我在 javascript 变量中有一个以 base64 编码的图像： data:image/png;base64, base64 data
[EDIT] I need to save that file to disk without asking to the visitor to do a right click [/EDIT]
[编辑] 我需要将该文件保存到磁盘而不要求访问者右键单击 [/编辑]
Is it possible ? How ?
是否可以 ？如何 ？
Thanks in advance
提前致谢
Best regards
此致
回答by davoclavo
I know this question is 2 years old, but hopefully people will see this update.
我知道这个问题已经有 2 年了，但希望人们会看到这个更新。
You can prompt the user to save an image in a base64 string (and also set the filename), without asking the user to do a right click
您可以提示用户将图像保存在 base64 字符串中（并设置文件名），而无需要求用户进行右键单击
var download = document.createElement('a');
download.href = dataURI;
download.download = filename;
download.click();
Example:
例子：
var download = document.createElement('a');
download.href = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
download.download = 'reddot.png';
download.click();
In order to trigger a click event using Firefox, you need to do what it is explained in this SO answer. Basically:
为了使用 Firefox 触发点击事件，您需要执行此 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')
As of 20/03/2013, the only browser that fully supports the downloadattribute is Chrome. Check the compatibility table here
截至 2013 年 3 月 20 日，唯一完全支持该download属性的浏览器是 Chrome。在此处检查兼容性表
回答by BalusC
... without asking to the visitor anyhing ... Is it possible?
...... 不向访客提出任何要求...... 有可能吗？
No, that would have been a security hole. If it was possible, one would be able to write malware to the enduser's disk unaskingly. Your best bet may be a (signed) Java Applet. True, it costs a bit of $$$ to get it signed (so that it doesn't pop security warnings), but it is able to write data to enduser's disk without its permission.
不，那将是一个安全漏洞。如果可能的话，人们将能够毫不犹豫地将恶意软件写入最终用户的磁盘。您最好的选择可能是（签名的）Java Applet。确实，签名需要花费一些美元（这样它就不会弹出安全警告），但它可以在未经其许可的情况下将数据写入最终用户的磁盘。
回答by malber
I am surprised nobody here mentioned using HTML5 blobs together with a couple of nice libraries.
我很惊讶这里没有人提到使用 HTML5 blob 和几个不错的库。
You first need https://github.com/eligrey/FileSaver.js/and https://github.com/blueimp/JavaScript-Canvas-to-Blob.
您首先需要https://github.com/eligrey/FileSaver.js/和https://github.com/blueimp/JavaScript-Canvas-to-Blob。
Then you can load the image into a canvas
然后您可以将图像加载到画布中
base_image = new Image();
base_image.src ='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
the canvas into a blob
画布变成一团
var canvas = document.getElementById('YourCanvas');
context = canvas.getContext('2d');
// Draw image within
context.drawImage(base_image, 0,0);
and finally save it
最后保存
x_canvas.toBlob(function(blob) {
saveAs(blob, "screenshot.png");
}, "image/png");
FF is not fully supported but at least you get a separate page with the image.
FF 不完全支持，但至少你得到一个单独的图像页面。
Check this out: http://jsfiddle.net/khhmm/9/
看看这个：http: //jsfiddle.net/khhmm/9/
EDIT:this is not compatible with Safari / Mac.
编辑：这与 Safari / Mac 不兼容。
回答by user323094
As other answers already stated, you cannot do it only with javascript. If you want, you can send the data (using normal HTTP POST) to a PHP script, call header('Content-type: image/png')and output the decoded image data to the page using echo base64_decode($base64data).
正如其他答案已经指出的那样，您不能仅使用 javascript 来完成。如果需要，您可以将数据（使用普通的 HTTP POST）发送到 PHP 脚本，header('Content-type: image/png')使用echo base64_decode($base64data).
This will work just as if user clicked on an image and open it or prompt him to save the file to disk (the normal browser's save file dialog).
这就像用户单击图像并打开它或提示他将文件保存到磁盘（普通浏览器的保存文件对话框）一样工作。
回答by jvenema
It's not possible.
这是不可能的。
If it was, browsers would be massively insecure, being able to write random data to your hard disk without user interaction.
如果是这样，浏览器将非常不安全，能够在没有用户交互的情况下将随机数据写入硬盘。
回答by oezi
with javascript, you can't. the only real possibility i can think of will be a java-applet, but maybe (i don't know how long that image should be saved) you could simply add an img-tag with you png and force caching(but if the user deletes his cache, the image will be gone).
使用 javascript，你不能。我能想到的唯一真正的可能性是一个 java-applet，但也许（我不知道该图像应该保存多长时间）您可以简单地在 png 中添加一个 img-tag 并强制缓存（但如果用户删除他的缓存，图像将消失）。
回答by ionutcib
I think you can do it something(maybe not only with javascript...xul programming needed). There are Firefox addons that save images to a folder(check Firefox addons site)
我认为你可以做一些事情（也许不仅需要使用 javascript...xul 编程）。有将图像保存到文件夹的 Firefox 插件（检查 Firefox 插件站点）
回答by Footer
You can make this file as blob on the server and use setTimeout function in order to fire the download.
您可以将此文件作为服务器上的 blob 并使用 setTimeout 函数来触发下载。
回答by Júlio Santos
I think it's possible with JavaScript if you use ActiveX.
如果您使用 ActiveX，我认为 JavaScript 是可能的。
Another possibility is to make the server spit out that file with a different mime type so the browser asks the user to save it.
另一种可能性是让服务器以不同的 mime 类型输出该文件，以便浏览器要求用户保存它。
