当前位置: 首页 > 面试题库 >

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

郝杰
2023-03-14
问题内容

我已经<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链接



 类似资料:
  • 问题内容: 我的Express应用程序正在从浏览器中接收base64编码的PNG(使用toDataURL()从画布生成)并将其写入文件。但是该文件不是有效的图像文件,因此“文件”实用程序只是将其标识为“数据”。 问题答案: 我认为您正在转换的数据比您需要的更多。一旦使用正确的编码创建了缓冲区,您只需要将缓冲区写入文件即可。 new Buffer(…,’base64’)通过将输入解释为base64编

  • 我正在Electronic(因此是node.js)中试验纵隔流记录API,希望将输出作为流处理。作为流处理将允许我在保存到磁盘之前处理MediaCorder输出-例如,我可以加密它。对于我的特定用例,我只关心音频,所以我没有任何视频元素记录。 下面是一个突出我所尝试的项目。中的关键代码是record.js,在save()函数中。 最终,我将尝试创建一个合适的来插入使用使用。 总结起来,我尝试了以下

  • 问题内容: 我需要将图像转换为base64字符串,以便可以将图像发送到服务器。是否有任何js文件用于此…?其他如何转换 问题答案: 您可以使用HTML5 : 创建一个画布,将图像加载到其中,然后用于获取base64表示形式(实际上,它是一个URL,但其中包含base64编码的图像)。

  • 问题内容: 我刚刚使用Python图像库(PIL)进行了一些图像处理,这是我之前发现的用于执行图像的傅立叶变换的文章,但是我无法使用save函数。整个代码运行良好,但不会保存生成的图像: 我得到的错误如下: 如何使用Pythons PIL保存图像? 问题答案: 已解决有关文件扩展名的错误,您可以使用(不带点)或将输出名称与扩展名一起传递。现在要处理该错误,您需要在频域中适当地修改数据以将其保存为整