我已经<img>使用JavaScript 将源内容从html标记转换为base64String。图像显示清晰。现在,我想使用javascript将该图像保存到用户磁盘。
<img>
<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>
当我将图像路径设置为<img>html标签的源代码时,此代码效果很好。但是,当我将source传递为base64String时不起作用。
如何实现我想要的?
仅允许用户下载图像或其他文件,您可以使用HTML5 download属性。
download
静态文件下载
<a href="/images/image-name.jpg" download> <!-- OR --> <a href="/images/image-name.jpg" download="new-image-name.jpg">
动态文件下载
在动态请求图像的情况下,可以模拟这种下载。
如果您的映像已经加载,并且base64有源,那么:
base64
saveBase64AsFile(base64, fileName) { var link = document.createElement("a"); link.setAttribute("href", base64); link.setAttribute("download", fileName); link.click(); }
否则,如果下载了图像文件,则Blob可以FileReader将其转换为Base64:
Blob
FileReader
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:Caniuse链接