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

然而，它似乎没有起作用。是必须由用户操作引发吗？否则为什么不起作用？

- Derek 朕會功夫

---

我假设你正在使用支持它的浏览器？http://caniuse.com/download - Ian

@Ian 我正在使用 Chrome，它支持它。 - Derek 朕會功夫

我似乎无法让它使用我提供的名称 - 你能行吗？ - drzaus

@drzaus 看起来他们改变了一些内部代码。 - Derek 朕會功夫

Answer 1

正如@Ian在解释的那样，问题在于jQuery的click()与原生的不同。

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

演示

- Oriol

---

为什么要将元素附加到body上？即使不这样做，它似乎也能正常工作。例如：https://jsfiddle.net/azw08zt5/135/ - Jsilvermist

如果我不将链接插入到树中，似乎在Firefox上无法运行。 - Oriol

它能工作，但同样也能打开图像，在我的情况下我只下载了。 - Kapil Soni

它可以用于一些图片，如谷歌图片等，但对于专业网站像Pixabay或pixels的图片则无法使用，因为它们需要经过身份验证的用户才能访问，所以会返回403错误。然而，通过右键点击然后选择“另存为”并不会返回403错误，有没有办法让JavaScript模拟简单的右键点击并选择“另存为”呢？ - Zeyad Shaban

在Firefox/Linux中什么也没做。 - chovy

在使用超过1MB的base64源时性能较差。 - Rodrigo Vieira

Answer 2

问题在于jQuery不会为元素触发本地的click事件，因此导航不会发生（元素的正常行为），所以您需要手动执行。对于几乎所有其他场景，都将触发本地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 ) ) {

- Ian

---

我认为你不需要将它从DOM中添加/移除 - 你只需要调用$('<a>').attr(...)[0].click()即可。 - drzaus

或[更好的是，没有jQuery]（https://dev59.com/TXVC5IYBdhLWcg3wdw-5#16523173） - http://jsfiddle.net/HTggQ/95/ - drzaus

从 Firefox 20 开始，似乎只允许 download 属性使用相同来源的 URL (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download)。如果在脚本运行后检查 DOM，看起来 Firefox 会将标签转换为 <img>，然后 jQuery 失去了对其的引用（为什么 .remove() 不起作用不太清楚）。在 Firefox 中将 href 更改为指向 jsfiddle 站点上的资源似乎可以解决问题。 - Ian

不是在下载，而是在新窗口中打开。 - Zeyad Shaban

由于浏览器已经更改，现在无论如何浏览器都会跟随链接并打开可以读取的文件，因此这个答案在2022年以后已经不再有效。仅当它无法读取资源（例如：zip或存档文件）时，浏览器才会触发下载。参考链接为 https://dev59.com/HlQK5IYBdhLWcg3wbfaW。 - Grogu