[英]Download Image by clicking on button using JavaScript
I have this image with a data URL and a button.我有这张带有数据 URL 和按钮的图像。
Now, I want to download that image using JavaScript.现在,我想使用 JavaScript 下载该图像。 So far I got this code but after download the image its saying: It looks like we don't support this format.
到目前为止,我得到了这个代码,但是在下载图像后它说:看起来我们不支持这种格式。
<img src="data:image/png;base64,iVBORw0KGgoA....." class="filterImage">
<input type="button" name="button" value="Save" id="saveImg" class="btn btn-primary float-right">
function saveImage() {
let image = document.querySelector(".filterImage");
var img = new Image();
img.onload = function() {
let canvas = document.createElement("canvas");
let width = canvas.width;
let height = canvas.height;
let context = canvas.getContext("2d");
context.drawImage( image, 0, 0, width, height );
}
img.src = image.src;
let link = document.createElement('a');
link.download = "image.png";
link.style.opacity = "0";
link.href = image.src;
document.body.append(link);
link.click();
link.remove();
}
saveImage(); // For testing purpose I am directly calling this function
Is there anything I am wrong?有什么我错了吗? How can I solve it?
我该如何解决?
Some browsers do not allow links to be clicked programmatically (by way of ~ link.click()
);某些浏览器不允许以编程方式单击链接(通过 ~
link.click()
); for example, when I try to do so, Chrome navigates to "#blocked".例如,当我尝试这样做时,Chrome 会导航到“#blocked”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.