如何下载 base64编码的映像？

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

191761 次浏览
小开

  1. 如果你想使用 JavaScript (没有任何后端)下载它，使用:

    window.location.href = 'data:application/octet-stream;base64,' + img;

    其中 img是您的 Base64编码图像。

  2. 如果希望允许用户指定文件名，请使用 a标记的 download属性:

    <a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
    • 注意: 非常老的浏览器不支持 download 属性
小开

你可以试试这个:

    <!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>

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

作为参考，你可以试试这个 URL: http://danml.com/download.html

小开

如果在 base64中已经有了它，那么在 base64前面添加 image 标记。把它连接到元素上

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

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

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

我从 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();
});
};
小开

在我的 React 应用程序中，我从一个 API 中获得了基本的64张图片，我将它存储在一个全局道具中，并通过 <a>标签下载了它。

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

用 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

小开

首先: 这个问题非常依赖于浏览器！我尝试了很多方法，所以我用这种方法来回答这个问题:

您应该将 base64-Data 放在 IMG-Element 的 src-Tag 中: 如何在 HTML 中显示 Base64图像？ 然后你可以在这些浏览器中右键点击图片并点击“保存图片...”(或类似的) :

  • 铬79
  • 44号边
  • Firefox 71
  • IE 11
  • Safari 13

同样在 Android 上使用 Chrome 和 Firefox。 最大的文件工作是23 MB PNG-File 在 IE11和 Safari 13。但是 Firefox 和 Chrome 也可以支持86MB 的 JPEG。

小开

它是如此简单，只需使用下面的函数:

// 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();
}
小开

在我的角度应用程序，我得到的基础64文件从服务器。

在 Html 中:-

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

在 T:-

  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();
}
小开

我不知道现在回答这个问题是否为时已晚，但我认为更好的解决方案可能是这样的。

  1. 从 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;
}

  2. 从 npm 安装 文件保护程序

    npm install file-saver

  3. 导入 < a href = “ https://www.npmjs.com/package/File-Saver”rel = “ norefrer”> File Saver

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

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

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

如果这个答案已经为您工作，请升级它，并标记为正确的，以帮助其他人很容易找到它


提交答案