使用 jQuery/Javascript 打开保存图像对话框？答案

【问题标题】：Open the Save Image dialog using jQuery/Javascript?使用 jQuery/Javascript 打开保存图像对话框？
【发布时间】：2008-12-30 03:44:39
【问题描述】：

当用户单击网页上的图像时，我想触发浏览器的“保存图像”对话框并让用户将图像保存在他们的硬盘上。是否有跨浏览器的方式来使用 jQuery/Javascript 做到这一点？

【问题讨论】：

【解决方案1】：

不准确，但您可以通过超链接到 img 文件并在服务器响应中设置 content-type 和 content-disposition 标头来实现。试试，例如，application/x-download，plus the other headers specified here。

【讨论】：

正如克雷格所说，只需用超链接包装图像，指向要下载的文件（设置了适当的标题）。
很好的说明；我会把它添加到答案中。
我从未听说过 application/x-download，但我听说过 application/octet-stream。
From TFA: "[...] 到一个非标准的值，例如 application/x-download。这个头文件不能被浏览器识别是非常重要的，因为浏览器经常尝试做一些特殊的事情。识别内容类型。”

【解决方案2】：

我唯一想到的是Internet Explorer的document.execCommand("SaveAs")，你可以打开一个窗口或者使用一个隐藏的iframe和你的图片的url，然后调用它......

检查（当然是 IE）this example 我已经完成了。

【讨论】：

【解决方案3】：

当你点击你的图片时，你可以创建一个隐藏的文件输入字段并触发（）这个：

$('.yourImageClass').click(function(){
 $('.hiddenInputClass').trigger('click');
})

【讨论】：

【解决方案4】：

我不这么认为 - 许多基本的浏览器功能（例如：打印预览）不适用于 Javascript。

【讨论】：

【解决方案5】：

Google Webstore
Github

如果这里有人仍然感兴趣，我做了一个类似这样的扩展。它使用 XMLHTTPRequest 来抓取对象，在这种情况下假定它是一个图像，然后为它创建一个 ObjectURL，一个指向该 ObjectUrl 的链接，然后单击虚构的链接。

在您的情况下，您可以将 ondragend 更改为 onclick 并有选择地将其添加到图像中。

【讨论】：