ven*_*esh 27 html javascript base64 image save
我已经使用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>
当我们将imagepath作为标记源传递时,此代码已经起作用,但是当我们将sorce作为base64String传递给tag时,它没有工作.
请在这个问题上建议我.
提前致谢.
And*_*kyi 35
只是为了允许用户下载图像或其他文件,您可以使用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链接
Joh*_*Doe 22
在JavaScript中,您无法直接访问文件系统.但是,您可以使浏览器弹出一个对话框窗口,允许用户选择保存位置.为此,请将该replace方法与Base64String一起使用并替换"image/png"为"image/octet-stream":
"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");
此外,符合W3C标准的浏览器提供了两种方法来处理base64编码和二进制数据:
也许,你会发现它们在某种程度上有用......
这是我理解你需要的重构版本:
window.addEventListener('DOMContentLoaded', () => {
const img = document.getElementById('embedImage');
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA' +
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
'9TXL0Y4OHwAAAABJRU5ErkJggg==';
img.addEventListener('load', () => button.removeAttribute('disabled'));
const button = document.getElementById('saveImage');
button.addEventListener('click', () => {
window.location.href = img.src.replace('image/png', 'image/octet-stream');
});
});你可以看到在行动它这里.