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

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经<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标签的源代码时，此代码效果很好。但是，当我将source传递为base64String时不起作用。

如何实现我想要的？

回答：

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

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

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

如果您的映像已经加载，并且base64有源，那么：

saveBase64AsFile(base64, fileName) {
    var link = document.createElement("a");
    link.setAttribute("href", base64);
    link.setAttribute("download", fileName);
    link.click();
}

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

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

以上是 如何使用JavaScript将base64映像保存到用户磁盘？ 的全部内容， 来源链接： utcz.com/qa/403667.html

回到顶部