通过按钮下载图像？答案

【问题标题】：Download Images via button?通过按钮下载图像？
【发布时间】：2014-08-04 17:51:58
【问题描述】：

我将如何使您单击一个按钮并下载页面上的所有图像？图像不是本地存储的，它们通过标签中的直接链接在那里。

我想用 javascript 来做..

  document.write('<input type="button" value="Download All Images" onclick="downloadIMG()">');        
    function downloadIMG() {
    // what here to download images?
    }

【问题讨论】：

见stackoverflow.com/questions/14504377/…

标签： javascript html image

【解决方案1】：

您需要为此使用服务器端脚本，例如 php 、 asp 等。

或者，您的服务器可能允许您通过配置动态更改标头。

带有 mod_headers 的 Apache 解决方案

将可下载的图像放在一个目录中。在此目录中，创建一个包含以下内容的 .htaccess 文件：

SetEnvIf Request_URI "([^/]+\.jpg)$" REQUESTED_IMAGE_BASENAME=$1
SetEnvIf Request_URI "([^/]+\.png)$" REQUESTED_IMAGE_BASENAME=$1
Header set Content-Disposition "attachment; filename=\"%{REQUESTED_IMAGE_BASENAME}e\"" env=REQUESTED_IMAGE_BASENAME

测试请求：

HEAD /test/Water%20lilies.jpg HTTP/1.1
Host: localhost
Test Response:

HTTP/1.1 200 OK
Date: Sat, 23 Jul 2011 09:03:52 GMT
Server: Apache/2.2.17 (Win32)
Last-Modified: Thu, 23 Aug 2001 14:00:00 GMT
ETag: "26000000017df3-14752-38c32e813d800"
Accept-Ranges: bytes
Content-Length: 83794
Content-Disposition: attachment; filename="Water lilies.jpg"
Content-Type: image/jpeg

HTML5 解决方案

您可以在锚点上使用 HTML5 下载属性：

<a href="http://dummyimage.com/600x400/000/fff.png"
    download>Download this image</a>
<a href="http://dummyimage.com/600x400/000/fff.png"
    download="alternate-filename.png"><img
        src="http://dummyimage.com/150x100/000/fff.png"></a>

【讨论】：

感谢您的洞察力。我是 Web 开发世界的新手。你能解释一下为什么它需要成为服务器端的理论方面吗？正如我在最初的帖子中所说，这些文件甚至不在我的服务器上。所以从技术上讲，它们是在别人的，可能是 php 准备好了？另外，这样做与右键单击并保存有什么区别？对不起，我没有意义。但是感谢您的帮助:)
事实上，你应该通过“标题”说浏览器那个文件是什么？我的意思是浏览器如何呈现这个文件。通常在您的 apache conf 中，您应该说“Theese 文件夹充满了 php，浏览器让它像 php 一样渲染”。当您单击图像（www.example.com/a.jpg）时，我们使用的现代浏览器知道现代图像格式，因此它们会在窗口上显示它，但像 rar ， zip 它们会强制下载。当您想强制下载图像时，您应该通过标题说浏览器。据我所知，js 没有标头代码。您可以只设置服务器端语言和html5。

【解决方案2】：

您需要的是具有“下载”属性的锚点 (<a>)。你可以做出这样的解决方案：

<a href="link/to/img" download>Download Link</a>

这具有不再需要 JS 的额外好处

【讨论】：

只是在新选项卡中打开文件.. :/