使用 JavaScript 下载图像

IT技术 javascript jquery download
2021-01-29 14:46:09

现在我有一个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/

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

2个回答

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

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

演示

它可以工作，但也可以打开图像，就我而言，我只下载了
2021-03-13 14:46:09
它适用于谷歌图像等某些图像，但不适用于来自专业网站（如Pixabay或pixels）的图像，因为它们需要经过身份验证的用户，因此它们返回403，但是右键单击然后将图像另存为不返回403，是有什么方法可以让javascript只做一个简单的右键单击并将图像另存为？
2021-03-13 14:46:09
在 Firefox/linux 中没有做任何事情
2021-03-14 14:46:09
为什么要附加到身体？如果不这样做，它似乎可以正常工作。示例：jsfiddle.net/azw08zt5/135
2021-03-27 14:46:09
如果我不将链接插入树中，@Jsilvermist 似乎在 Firefox 上不起作用。
2021-03-31 14:46:09

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

演示： 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 ) ) {
@user963936 看起来从 Firefox 20 开始，它们只允许download属性的同源 URL （developer.mozilla.org/en-US/docs/Web/HTML/Element/...）。如果您在脚本运行后检查 DOM，看起来 Firefox 将标记转换为<img>，然后 jQuery 失去对它的引用（为什么.remove()）似乎没有做任何事情。更改href指向 jsfiddle 站点上的资源似乎在 Firefox 中有效。
2021-03-14 14:46:09
我认为您不需要从 DOM 中附加/删除它——您应该能够调用$('<a>').attr(...)[0].click()
2021-03-21 14:46:09
2021-03-26 14:46:09
这可以放在 .each() 中吗？我似乎只能使用这种技术一次下载一个图像，可能与重载变量有关......
2021-03-27 14:46:09
它不是下载它，它只是在新窗口中打开
2021-04-04 14:46:09
其它你可能感兴趣的问题
上一篇为什么经过身份验证的 CORS 请求的预检 OPTIONS 请求在 Chrome 中有效，但在 Firefox 中无效？ 下一篇在文档底部而不是顶部加载 JS 的好处