如何下载 base64 编码的图像？

Question

我有一个来自服务器的 base64 编码图像，我想通过 JavaScript 强制下载它。 有可能吗？

Answer 1

如果您想使用 JavaScript（没有任何后端）下载它，请使用：
```
 window.location.href = 'data:application/octet-stream;base64,' + img;
```
其中img是您的 base64 编码图像。
如果要允许用户指定文件名，请使用a标签的download属性：
```
 <a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
```
- 注意：非常旧的浏览器不支持下载属性

Answer 2

使用 Javascript 执行此操作的简单方法...

 var a = document.createElement("a"); //Create <a> a.href = "data:image/png;base64," + ImageBase64; //Image Base64 Goes here a.download = "Image.png"; //File name Here a.click(); //Downloaded file

Answer 3

使用下面的函数非常简单：

// Parameters:
// contentType: The content type of your file. 
//              its like application/pdf or application/msword or image/jpeg or
//              image/png and so on
// base64Data: Its your actual base64 data
// fileName: Its the file name of the file which will be downloaded. 

function downloadBase64File(contentType, base64Data, fileName) {
     const linkSource = `data:${contentType};base64,${base64Data}`;
     const downloadLink = document.createElement("a");
     downloadLink.href = linkSource;
     downloadLink.download = fileName;
     downloadLink.click();
}

Answer 4

我从Chrome如何截取整页屏幕截图的源代码中找到了这个解决方案。

const base64string = "";
const pageImage = new Image();
pageImage.src = 'data:image/png;base64,' + base64string;
pageImage.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = pageImage.naturalWidth;
    canvas.height= pageImage.naturalHeight;

    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(pageImage, 0, 0);
    console.log(canvas, pageImage)
    saveScreenshot(canvas);
}
function saveScreenshot(canvas) {
    let fileName = "image"
    const link = document.createElement('a');
    link.download = fileName + '.png';
    console.log(canvas)
    canvas.toBlob(function(blob) {
        console.log(blob)
        link.href = URL.createObjectURL(blob);
        link.click();
    });
};

Answer 5

我有一个来自服务器的 base64 编码图像，我想通过 JavaScript 强制下载该图像。 有可能吗？

Answer 6

我不知道回答这个问题是否迟到，但我认为更好的解决方案可能是这个。

从 base64string 创建一个文件

const convertBase64ToFile = (base64String, fileName) => { let arr = base64String.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]); let n = bstr.length; let uint8Array = new Uint8Array(n); while (n--) { uint8Array[n] = bstr.charCodeAt(n); } let file = new File([uint8Array], fileName, { type: mime }); return file; }

使用 npm 安装File Saver
```
 npm install file-saver
```

导入文件保护程序

const { saveAs } = require('file-saver'); /// OR import { saveAs } from 'file-saver';

使用文件保护程序下载文件

const downloadBase64Data = (base64String, fileName) => { let file = convertBase64ToFile(base64String, fileName); saveAs(file, fileName); }

如果此答案对您有用，请点赞并将其标记为正确，以帮助其他人轻松找到它

Answer 7

你可以试试这个：

    <!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Download Text File DataURL Demo</title>
        <style>
            body{ font: menu; }
        </style>
        <script src='//js.zapjs.com/js/download.js'></script>
    </head>
    <body>
        <h1>Download Text File DataURL Demo</h1>
        <main></main>
        <script>
            download("data:application/octet-stream;base64,YOUR BASE64URL", "dlDataUrlText.jpeg", "application/octet-stream;base64");
        </script>
    </body>

</html>

下载标签使用包含的脚本下载图像。

作为参考，您可以试试这个网址： http ://danml.com/download.html

Answer 8

在我的 Angular 应用程序中，我从服务器获取 base 64 文件。

在 HTML 中：-

<button type="button" (click)="downloadFile(fileName,base64data,fileType)"></button>

在 Ts 中：-

  downloadFile(fileName:string,data: any,fileFormat:string): void {
    const linkSource = 'data:'+fileFormat+';base64'+data;
    const downloadLink = document.createElement("a");
    downloadLink.href = linkSource;
    downloadLink.download = fileName;
    downloadLink.click();
}

Answer 9

如果你已经有base64的，在base64前面加上image标签。 将其附加到元素

png64 = "data:image/" + png64; 
$('#downloadPNG').attr('href', png64);

将下载时所需的文件名添加到download标签中。

<a download="chart.png" id="downloadPNG">Export img</a>

Answer 10

在我的 React 应用程序中，我从一个 API 获取 base 64 图像，我将它存储在一个全局属性中，并在<a>标签的帮助下下载它。

<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>

Answer 11

起初：这个问题非常依赖于浏览器，我尝试了很多：所以我想这样回答这个问题：

您应该将 base64 数据放在 IMG 元素的 src 标签内： How to display Base64 images in HTML? 然后您可以右键单击图像并在这些浏览器中单击“保存图像...”（或类似的）：

铬 79
边 44
火狐 71
浏览器 11
野生动物园 13

在 Android 上也可以使用 Chrome 和 Firefox。 在 IE 11 和 Safari 13 中工作的最大文件是 23 MB PNG 文件。但是 Firefox 和 Chrome 也适用于 86 MB JPEG。

如何下载 base64 编码的图像？

问题描述

10 个解决方案

解决方案1
106 2012-12-23 12:49:26

解决方案2
81 2019-11-12 16:55:00

解决方案3
38 2020-03-17 09:34:02

解决方案4
10 2019-08-07 01:46:52

解决方案5
9 2020-01-15 08:56:50

解决方案6
9 2021-04-02 13:47:11

解决方案7
6 2018-11-16 12:29:06

解决方案8
6 2020-11-25 07:26:46

解决方案9
2 2019-02-08 15:34:57

解决方案10
2 2019-09-06 09:54:04

解决方案11
0 2019-12-18 13:39:29

如何下载 base64 编码的图像？

问题描述

10 个解决方案

解决方案1 106 2012-12-23 12:49:26

解决方案2 81 2019-11-12 16:55:00

解决方案3 38 2020-03-17 09:34:02

解决方案4 10 2019-08-07 01:46:52

解决方案5 9 2020-01-15 08:56:50

解决方案6 9 2021-04-02 13:47:11

解决方案7 6 2018-11-16 12:29:06

解决方案8 6 2020-11-25 07:26:46

解决方案9 2 2019-02-08 15:34:57

解决方案10 2 2019-09-06 09:54:04

解决方案11 0 2019-12-18 13:39:29

解决方案1
106 2012-12-23 12:49:26

解决方案2
81 2019-11-12 16:55:00

解决方案3
38 2020-03-17 09:34:02

解决方案4
10 2019-08-07 01:46:52

解决方案5
9 2020-01-15 08:56:50

解决方案6
9 2021-04-02 13:47:11

解决方案7
6 2018-11-16 12:29:06

解决方案8
6 2020-11-25 07:26:46

解决方案9
2 2019-02-08 15:34:57

解决方案10
2 2019-09-06 09:54:04

解决方案11
0 2019-12-18 13:39:29