使用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

问题是jQuery不会触发元素的本机click事件,<a>因此导航不会发生(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();

演示: 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()与原生jQuery 不同.

因此,考虑使用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);

演示