如何使用 JavaScript 将 base64 图像保存到用户磁盘？

IT技术 javascript html image base64 save
2021-02-08 07:56:50

我已<img>使用 JavaScript将源内容从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 传递时不起作用。

如何实现我想要的？

4个回答

HTML5download属性

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

静态文件下载

<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 链接

在 Firefox 上，必须将锚标记添加到 DOM 以便单击事件工作。见stackoverflow.com/q/48642223/1882644
2021-03-14 07:56:50
对我来说，它适用于 Chrome，但不适用于 Firefox。有没有人面临同样的问题？
2021-04-03 07:56:50
现在支持 Safari。
2021-04-09 07:56:50

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

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

此外，符合 W3C 的浏览器提供了 2 种处理 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从未成为任何标准的一部分。一些符合标准的浏览器支持它们，但不要指望它在所有浏览器中都存在。
2021-03-16 07:56:50
@John Doe：非常感谢。但它不适用于 IE，我们可以从用户那里获取文件位置吗？我们可以拥有和以前一样的文件格式吗？因为都保存为 .part 文件。
2021-03-16 07:56:50
jsfiddle 死了:(
2021-03-27 07:56:50
@AndyE 正确。这就是为什么您必须在使用这些方法之前执行功能测试的原因。
2021-03-28 07:56:50
@vengatesh：请查看更新的答案。请记住，您必须指定正确的文件扩展名才能正确保存图像。
2021-04-08 07:56:50

这个作品

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

基于上面的答案，但有一些变化

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

其它你可能感兴趣的问题
上一篇如何检测javascript文件是否已加载？ 下一篇如何利用异步 XMLHttpRequest 的回调函数？