使用javascript将图像保存到用户的磁盘 [英] save image to user's disk using javascript
问题描述
我使用javascript将base64String作为html标签的源代码。图像显示清晰。现在我想使用javascript将该图像保存到用户磁盘。
< html>
< head>
< script>
函数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>保存图片< / a>
< img id =embedImagealt =红点>
< / body>
< / html>
当我们将图像路径作为标签的源代码传递时，此代码已经工作，但是它在我们通过sorce作为base64String来标记。
请在这个问题上提出建议。
在此先感谢。为了让用户下载图片或其他文件，您可以使用HTML5 下载
静态文件下载
< a href =/ images / image-name.jpg下载>
<！ - 或 - >
< a href =/ images / image-name.jpgdownload =new-image-name.jpg>
动态文件下载
如果您的图片已经被加载，并且您拥有 base64 / code> source then：
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链接
i have passed the source for the html tag as base64String using javascript. the image was displayed clearly. now i want to save that image to user' disk using 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>
this code had worked when we pass the imagepath as source for tag, however it hadn't worked when we pass the sorce as base64String to tag.
please suggest me on this issue.
thanks in advance.
Just to allow user to download the image or other file you may use the HTML5 download attribute.
Static file download
<a href="/images/image-name.jpg" download>
<!-- OR -->
<a href="/images/image-name.jpg" download="new-image-name.jpg">
Dynamic file download
In cases requesting image dynamically it is possible to emulate such download.
If your image is already loaded and you have the base64 source then:
saveBase64AsFile(base64, fileName) {
var link = document.createElement("a");
link.setAttribute("href", base64);
link.setAttribute("download", fileName);
link.click();
}
Otherwise if image file is downloaded as Blob you can use FileReader to convert it to 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);
}
Bad news! Be careful: IE is not supported: Caniuse link
这篇关于使用javascript将图像保存到用户的磁盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
