Javascript 如何下载base64编码的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14011021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to download a base64-encoded image?
提问by Mario
I have a base64-encoded image from the server for which I want to force the download through JavaScript. Is is possible?
我有一个来自服务器的 base64 编码图像，我想通过 JavaScript 强制下载该图像。有可能吗？
回答by Minko Gechev
If you want to download it using JavaScript (without any back-end) use:
如果您想使用 JavaScript（没有任何后端）下载它，请使用：
window.location.href = 'data:application/octet-stream;base64,' + img;
where imgis your base64 encoded image.
img你的 base64 编码图像在哪里。
If you want to allow the user to specify a file name, use the downloadattribute of the atag:
如果要允许用户指定文件名，请使用标签的download属性a：
<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</a>
- Notice: The download attribute is not widely supported.
- 注意：下载属性没有被广泛支持。
回答by J Code
Simple way to do this with Javascript...
使用 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回答by Sentient
I found this solution from the sourcecode of how Chrome takes full-page screenshots.
我从 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();
});
};
回答by RxJS
You can try this :
你可以试试这个：
<!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 tag downloads the image using the script included.
下载标签使用包含的脚本下载图像。
For reference you can try this URL : http://danml.com/download.html
作为参考，你可以试试这个 URL：http: //danml.com/download.html
回答by cweitat
If you already have it in base64, add the image tag in front of the base64. attach it to the element
如果您已经在 base64 中拥有它，请在 base64 前面添加图像标签。将其附加到元素
png64 = "data:image/" + png64;
$('#downloadPNG').attr('href', png64);
Add the file name that you want when downloading to the downloadtag.
将下载时所需的文件名添加到download标签中。
<a download="chart.png" id="downloadPNG">Export img</a>
回答by Ehsan Ahmadi
It is so simple just use function below:
使用下面的函数就这么简单：
// 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();
}
回答by Sebastian
At first: This question is extremly browser dependent! I tried many, so I came up to answer this question that way:
首先：这个问题非常依赖浏览器！我尝试了很多，所以我想这样回答这个问题：
You should put the base64-Data inside the src-Tag of an IMG-Element: How to display Base64 images in HTML?Then you can right click the Image and click "Save Image..." (or similar) in these browsers:
您应该将 base64-Data 放在 IMG-Element 的 src-Tag 中： 如何在 HTML 中显示 Base64 图像？然后您可以在这些浏览器中右键单击图像并单击“保存图像...”（或类似的）：
- Chrome 79
- Edge 44
- Firefox 71
- IE 11
- Safari 13
- 铬 79
- 边缘 44
- 火狐 71
- 浏览器 11
- 野生动物园 13
Also on Android with Chrome and Firefox. Biggest file working was 23 MB PNG-File in IE 11 and Safari 13. But Firefox and Chrome did also work for 86 MB JPEG.
同样在带有 Chrome 和 Firefox 的 Android 上。在 IE 11 和 Safari 13 中工作的最大文件是 23 MB PNG 文件。但 Firefox 和 Chrome 也适用于 86 MB JPEG。
回答by jayant karmakar
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回答by Piyush Thawakar
In my React App, I was getting the base 64 images from an API, I stored it in a global prop and downloaded it with the help of <a>tag.
在我的 React 应用程序中，我从 API 获取基本 64 个图像，我将它存储在一个全局属性中并在<a>标签的帮助下下载它。
<a href={`data:application/octet-stream;base64,${this.props.base64image}`} download={"imageName"}>Click to Download the image</a>
