我有一个来自服务器的 base64 编码图像，我想通过 JavaScript 强制下载该图像。有可能吗？
如何下载base64编码的图像？
IT技术
javascript
html
image
base64
2021-03-02 18:06:55
6个回答
如果您想使用 JavaScript（没有任何后端）下载它，请使用：
window.location.href = 'data:application/octet-stream;base64,' + img;img你的 base64 编码图像在哪里。如果要允许用户指定文件名，请使用标签的
download属性a：<a download="FILENAME.EXT" href="data:image/png;base64,asdasd...">Download</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使用下面的函数就这么简单：
// 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();
}
我从 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();
});
};
你可以试试这个：
<!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>
下载标签使用包含的脚本下载图像。
作为参考，你可以试试这个 URL：http : //danml.com/download.html