如何将base64映像保存给用户'；使用JavaScript的磁盘？

我已将源内容从

当我将图像路径设置为

html标记的源代码时，该代码运行良好。但是，当我将源代码作为base64String传递时，它不起作用

---

如何实现我想要的？

在JavaScript中，您不能直接访问文件系统。 但是，您可以使浏览器弹出一个对话框窗口，允许用户选择保存位置。为此，请使用base64字符串的

replace

方法，并将

的“image/png”

替换为

的“image/octet stream”

：

---

此外，W3C兼容浏览器提供了两种处理base64编码和二进制数据的方法：

也许，你会发现它们在某种程度上很有用

---

以下是我理解您需要的重构版本：

window.addEventListener（'DOMContentLoaded'，（）=>{
const img=document.getElementById（'embedImage'）；
img.src='data:image/png；base64，ivborw0kggoaaaansuhueugaaaua'+
“aaafcayaaacnbyblaaaheleqvqi12p4//8/w38giaxdibke0dhxgljnbao”+
“9TXL0Y4OHWAAAABJRU5ERKJGG==”；
img.addEventListener（'load'，（）=>button.removeAttribute（'disabled'）；
const button=document.getElementById（'saveImage'）；
按钮。addEventListener（'单击'，（）=>{
window.location.href=img.src.replace（'image/png'，'image/octet stream'）；
});
});

保存图像
HTML5
下载
属性
为了允许用户下载图像或其他文件，您可以使用HTML5
download
属性

静态文件下载

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

否则，如果图像文件作为
Blob
下载，则可以使用
FileReader
将其转换为Base64：

function saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");

    document.body.appendChild(link); // for Firefox

    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

Firefox

您正在创建的锚标记也需要添加到Firefox中的DOM中，以便识别单击事件（）

IE不受支持：
此功能有效

function saveBlobAsFile(blob, fileName) {
    var reader = new FileReader();

    reader.onloadend = function () {    
        var base64 = reader.result ;
        var link = document.createElement("a");

        document.body.appendChild(link); // for Firefox

        link.setAttribute("href", base64);
        link.setAttribute("download", fileName);
        link.click();
    };

    reader.readAsDataURL(blob);
}

基于上面的答案，但做了一些修改
检查一下是什么包装了HTML5方法，并为IE10等提供了解决办法。
我知道数据的使用有一些限制：IE中的图像。。。文件大小和其他。之前尝试查看它。如果它有限制，那么它不应该出现在屏幕上。但即使对于长尺寸的图像，也会显示图像。我无法将该图像保存到磁盘。我可以使用javascript将bytearray作为标记源传递吗？请注意，
atob
和
btoa
从来都不是任何标准的一部分。某些符合标准的浏览器支持它们，但不要指望所有浏览器都支持它们。@AndyE正确。这就是为什么在使用这些方法之前必须执行功能测试。@vengatesh:请查看更新的答案。请记住，为了正确保存图像，您必须指定正确的文件扩展名。@John Doe:非常感谢。但它不适用于IE，我们可以从用户那里获取文件位置吗？我们能有和以前一样的文件格式吗？。因为所有文件都保存为.part file.jsfiddle已经死了：（现在支持Safari。对我来说，它在Chrome上工作，但在Firefox上不工作。有人面临同样的问题吗？在Firefox上，必须将锚定标记添加到DOM才能单击事件工作。看到了吗？谢谢！
function saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");

    document.body.appendChild(link); // for Firefox

    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

function saveBlobAsFile(blob, fileName) {
    var reader = new FileReader();

    reader.onloadend = function () {    
        var base64 = reader.result ;
        var link = document.createElement("a");

        document.body.appendChild(link); // for Firefox

        link.setAttribute("href", base64);
        link.setAttribute("download", fileName);
        link.click();
    };

    reader.readAsDataURL(blob);
}

function saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");
    document.body.appendChild(link);
    link.setAttribute("type", "hidden");
    link.href = "data:text/plain;base64," + base64;
    link.download = fileName;
    link.click();  
    document.body.removeChild(link);
}