使用JavaScript将图像保存到用户的磁盘
我已经通过使用JavaScript的base64String HTML标记的源代码。 图像显示清晰。 现在我想使用JavaScript将该图像保存到用户的磁盘。
<html> <head> <script> function saveImageAs () { var imgOrURL; embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ "AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ "9TXL0Y4OHwAAAABJRU5ErkJggg=="; imgOrURL = embedImage; if (typeof imgOrURL == 'object') imgOrURL = embedImage.src; window.win = open(imgOrURL); setTimeout('win.document.execCommand("SaveAs")', 0); } </script> </head> <body> <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> <img id="embedImage" alt="Red dot"> </body> </html> 当我们将imagepath作为标签的源代码传递的时候，这个代码已经工作了，但是当我们将sorce作为base64String传递给标签的时候，它并没有工作。
请在这个问题上build议我。
提前致谢。
只要允许用户下载图像或其他文件，您可以使用HTML5 download属性。
静态文件下载
<a href="http://img.dovov.comimage-name.jpg" download> <!-- OR --> <a href="http://img.dovov.comimage-name.jpg" download="new-image-name.jpg">
dynamic文件下载
在dynamic请求图像的情况下，可以模拟这种下载。
如果你的图像已经被加载，并且你有base64源代码，那么：
saveBase64AsFile(base64, fileName) { var link = document.createElement("a"); link.setAttribute("href", base64); link.setAttribute("download", fileName); link.click(); }
否则，如果图像文件作为Blob下载，则可以使用FileReader将其转换为Base64：
saveBlobAsFile(blob, fileName) { var reader = new FileReader(); reader.onloadend = function () { var base64 = reader.result ; var link = document.createElement("a"); link.setAttribute("href", base64); link.setAttribute("download", fileName); link.click(); }; reader.readAsDataURL(blob); }
坏消息！ 注意： IE和Safari不支持： Caniuse链接
在JavaScript中你不能直接访问文件系统。 但是，您可以让浏览器popup一个对话窗口，允许用户select保存位置。 为了做到这一点，使用Base64String replace方法，并用"image/octet-stream"replace"image/png" "image/octet-stream" ：
"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");
此外，符合W3C标准的浏览器提供了两种使用base64编码和二进制数据的方法：
- ATOB（）
- BTOA（）
也许，你会发现他们有用的方式…
这里是我理解你需要的重构版本：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="text/javascript"> window.onload = function () { var img = document.getElementById('embedImage'); var button = document.getElementById('saveImage'); img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ '9TXL0Y4OHwAAAABJRU5ErkJggg=='; img.onload = function () { button.removeAttribute('disabled'); }; button.onclick = function () { window.location.href = img.src.replace('image/png', 'image/octet-stream'); }; }; </script> </head> <body> <img id="embedImage" alt="Red dot"/> <input id="saveImage" type="button" value="save image" disabled="disabled"/> </body> </html>
你可以在这里看到它的行动。
