如何通过单击将图像下载到客户端存储？答案

【问题标题】：How to download the image to the client-side storage by clicking on it?如何通过单击将图像下载到客户端存储？
【发布时间】：2021-06-24 08:22:29
【问题描述】：

我正在尝试将功能，当用户单击图像时，它会下载到他们的计算机上，我想要做的是，我正在将图像从 pixabay api 获取到我的网站，用户所在的位置能够查看图片并通过单击将其下载到他们的本地存储不是通过右键单击并保存图像，而是通过左键单击。我该怎么做？这是我获取 api 的代码

$.ajax({
                url: "https://pixabay.com/api/?key="+apikey+"&q="+term+"&image_type=photo&per_page=50",
                type: "GET",
                success: function(responseText){
                    
                var photos = responseText;
                   
                    var str = "";
                    for(let i = 0; i<photos.hits.length; i++){
                        str+="<div class='box'><img src=" + photos.hits[i].webformatURL + "></div>";
                    }
                    $("#photo-list").html(str);

我已尝试在此处下载。但这行不通，因为该文件不属于同一来源。我怎样才能使这项工作。

【问题讨论】：

标签： javascript php jquery image api

【解决方案1】：

使用锚标签的下载属性

str+="<div class='box'>
             <a href= " + photos.hits[i].webformatURL + " download>
                   <img src=" + photos.hits[i].webformatURL + ">
             </a>
       </div>";

您甚至可以指定要下载的文件的名称，只需将名称分配给下载属性

<a href="path to your file" download="filename"> <img src="image path"> </a>

【讨论】：

您好，感谢您的回复！我已经尝试过了，但这会将我带到新链接，但点击它并没有下载图像。

【解决方案2】：

根据Mozilla developer documentation：

下载仅适用于同源网址，或blob:和data:方案。

-如果 Content-Disposition 标头具有与下载属性不同的信息，则结果行为可能会有所不同：

-如果标头指定了文件名，则优先于下载属性中指定的文件名。

-如果标头指定内联、Chrome 和 Firefox 82 及更高版本的配置，则优先考虑该属性并将其视为下载。 82 之前的 Firefox 版本优先考虑标题并内联显示内容。

我们可以从中了解到，您可以从您的网站下载来自其他来源的图片

为此，您需要先将图像下载到您的服务器，然后才能从您的网站下载，然后您可以使用下载属性轻松使其可下载：

这是错误的：

<a href='https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg' download>

<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg"/>
</a>

没错：

<a href='https://mywebiste.com/path/to/images/myimage.svg' download>

<img src="https://mywebiste.com/path/to/images/myimage.svg"/>
</a>

【讨论】：