使用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();

演示：http：//jsfiddle.net/DerekL/Wx7wn/

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

Answer 1

正如@Ian 解释的那样，问题在于jQuery的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);