使用JavaScript下载图片

Question

现在我有一个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();

但是，它似乎不起作用。它是否必须由用户操作触发？否则为什么它不起作用？

Answer 1

问题在于jQuery不会触发元素的本机click事件，<a>因此不会发生导航（的正常行为<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();








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