Question

我已经使用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>

当我们将imagepath作为标记源传递时，此代码已经起作用，但是当我们将sorce作为base64String传递给标记时它没有用。

请就此问题向我提出建议。

提前感谢。

Answer 1

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

Answer 2

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

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

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

可能你会发现它们有用......

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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
        <script type="text/javascript">
            window.onload = function () {
                var img = document.getElementById('embedImage');
                var button = document.getElementById('saveImage');
                img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+
                'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+
                '9TXL0Y4OHwAAAABJRU5ErkJggg==';
                img.onload = function () {
                    button.removeAttribute('disabled');
                };
                button.onclick = function () {
                    window.location.href = img.src.replace('image/png', 'image/octet-stream');
                };
            };
        </script>
    </head>
    <body>
        <img id="embedImage" alt="Red dot"/>
        <input id="saveImage" type="button" value="save image" disabled="disabled"/>
    </body>
</html>

您可以在行动HERE中看到它。

Answer 3

这个作品

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

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

Answer 4

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

使用javascript将图像保存到用户的磁盘

4 个答案: