用JavaScript下载图片

现在我有一个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不会触发<a>元素的本机click事件，导致导航不会发生（ <a>的正常行为），所以你需要手动做到这一点。 对于几乎所有其他的情况，本地DOM事件被触发（至less试图 – 它在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 ) ) { 

Answer 2

正如@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); 

演示