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

问题是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();

DEMO： 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 ) ) {

Answer 2

作为@Ian explained，问题是jQuery的click()与本地的var a = document.createElement('a'); a.href = "img.png"; a.download = "output.png"; document.body.appendChild(a); a.click(); document.body.removeChild(a);不同。

因此，考虑使用vanilla-js而不是jQuery：

{{1}}

Demo

使用JavaScript下载图像

2 个答案: