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

How to save a base64 image to user's disk using JavaScript?

本文关键字：用户 磁盘 保存 图像 何使用 JavaScript base64      更新时间：2023-09-26

我已经使用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不工作。

如何实现我想要的?

HTML5 download attribute

只是为了允许用户下载图像或其他文件，您可以使用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

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

不支持IE : Caniuse link

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

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

同样，兼容w3c的浏览器提供了2种方法来处理base64编码和二进制数据:

  • atob ()
  • btoa ()

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

这是我理解你需要的重构版本:

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>

This Works 

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

相关文章：