使用JavaScript下载图像

hpxqektj 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(111)

现在我有一个canvas，我想把它保存为PNG。我可以用所有那些花哨复杂的文件系统API来做，但我真的不喜欢它们。
我知道是否有download属性的链接：

<a href="img.png" download="output.png">Download</a>

如果用户点击它，它会下载文件。因此我想出了这个：

$("<a>")
    .attr("href", "img.png")
    .attr("download", "output.png")
    .appendTo("body")
    .click()
    .remove();

演示：http://jsfiddle.net/DerekL/Wx7wn/
然而，它似乎不起作用。它必须由用户操作触发吗？或者为什么它不起作用？

JavaScript

来源：https://stackoverflow.com/questions/17311645/download-image-with-javascript

2条答案

按热度按时间

8zzbczxx1#

作为@Ian explained，问题是jQuery的click()与本机的click()不同。
因此，请考虑使用vanilla-js而不是jQuery：

var a = document.createElement('a');
a.href = "img.png";
a.download = "output.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Demo

赞(0）回复(0）举报 2022-12-28

omjgkv6w2#

问题是jQuery不会为<a>元素触发原生click事件，因此导航不会发生（<a>的正常行为），因此您需要手动执行此操作。对于几乎所有其他场景，都会触发原生DOM事件（至少尝试触发-它位于try/catch中）。
要手动触发，请尝试：

var a = $("<a>")
    .attr("href", "http://i.stack.imgur.com/L8rHf.png")
    .attr("download", "img.png")
    .appendTo("body");

a[0].click();

a.remove();

演示：http://jsfiddle.net/HTggQ/

当前jQuery源中的相关行：https://github.com/jquery/jquery/blob/1.11.1/src/event.js#L332

if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
        jQuery.acceptData( elem ) ) {

赞(0）回复(0）举报 2022-12-28

我来回答

使用JavaScript下载图像

2条答案

相关问题

热门标签

最新问答