【问题标题】：How to save a base64 image to user's disk using JavaScript?如何使用 JavaScript 将 base64 图像保存到用户磁盘？
【发布时间】：2011-12-18 13:49:30
【问题描述】：

我已使用 JavaScript 将源内容从 <img> html 标记转换为 base64String。图像显示得很清楚。现在我想使用 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>

当我将图像路径设置为<img> html 标记的源时，此代码运行良好。但是，当我将源作为 base64String 传递时不起作用。

如何实现我想要的？

【问题讨论】：

我知道数据的使用有限制：IE 中的图像...文件大小和其他。试着在之前看看它。
如果有限制，那么它不应该出现在屏幕上。但即使是长尺寸的图像也会显示图像。我无法保存该图像 tom 磁盘。
我可以使用 javascript 将 bytearray 作为标签的源吗？

标签： javascript html image base64 save

【解决方案1】：

查看https://github.com/eligrey/FileSaver.js/，它封装了 HTML5 方法并提供了解决方法，例如IE10。

【讨论】：

【解决方案2】：

这可行

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);
}

根据上面的答案，但有一些变化

【讨论】：

【解决方案3】：

HTML5 `download` 属性

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

静态文件下载

<a href="/images/image-name.jpg" download>
<!-- OR -->
<a href="/images/image-name.jpg" download="new-image-name.jpg">

动态文件下载

在动态请求图像的情况下，可以模拟这种下载。

如果您的图像已经加载并且您有 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();
}

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

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);
}

火狐

您正在创建的锚标记也需要添加到 Firefox 中的 DOM，以便识别点击事件 (Link)。

不支持 IE：Caniuse link

【讨论】：

现在支持 Safari。
对我来说，它适用于 Chrome，但不适用于 Firefox。有人遇到同样的问题吗？
在 Firefox 上，必须将锚标记添加到 DOM 以便单击事件起作用。见stackoverflow.com/q/48642223/1882644

【解决方案4】：

在 JavaScript 中，您不能直接访问文件系统。但是，您可以让浏览器弹出一个对话框窗口，允许用户选择保存位置。为此，请将replace 方法与您的Base64String 一起使用，并将"image/png" 替换为"image/octet-stream"：

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

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

您可能会发现它们在某种程度上很有用...

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

window.addEventListener('DOMContentLoaded', () => {
  const img = document.getElementById('embedImage');
  img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' +
    'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
    '9TXL0Y4OHwAAAABJRU5ErkJggg==';

  img.addEventListener('load', () => button.removeAttribute('disabled'));
  
  const button = document.getElementById('saveImage');
  button.addEventListener('click', () => {
    window.location.href = img.src.replace('image/png', 'image/octet-stream');
  });
});

<!DOCTYPE html>
<html>

<body>
  <img id="embedImage" alt="Red dot" />
  <button id="saveImage" disabled="disabled">save image</button>
</body>

</html>

【讨论】：

请注意，atob 和 btoa 从未成为任何标准的一部分。一些符合标准的浏览器都支持它们，但不要指望它会出现在所有浏览器中。
@AndyE 正确。这就是为什么您必须在使用这些方法之前执行功能测试。
@vengatesh ：请参阅更新后的答案。请记住，您必须指定正确的文件扩展名才能正确保存图像。
@John Doe：非常感谢。但它不适用于 IE，我们可以从用户那里获取文件位置吗？我们可以有和以前一样的文件格式吗？因为都保存为 .part 文件。
jsfiddle 死了 :(

HTML5 download 属性

HTML5 `download` 属性