如何在HTML中为移动页面创建图像下载链接？

I have a mobile html page which contains images. I want to create a button or a link which is used for a download of an image. The image should then be saved to the users mobile image gallery.

我有一个包含图像的移动html页面。我想创建一个用于下载图像的按钮或链接。然后应将图像保存到用户移动图像库。

I have seen this post: How can I create download link in html?

我看过这篇文章:如何在html中创建下载链接?

The solution

<a href="link/to/your/download/file" download="filename">Download link</a>

is working in desktop browsers but not on mobile.

正在桌面浏览器中工作但不在移动设备上。

Here is a JSFiddle I made: http://jsfiddle.net/tDVqH/4/

这是我制作的JSFiddle:http://jsfiddle.net/tDVqH/4/

Note: The image is created in the browser i.e., in a HTML5 canvas element. This image can be generated with canvas.toDataUrl(). The resulting image should be saved to the mobile image gallery.

注意:图像是在浏览器中创建的,即在HTML5 canvas元素中创建的。可以使用canvas.toDataUrl()生成此图像。生成的图像应保存到移动图像库中。

How can save an image to the users mobile image gallery with a click/tap? Is there a JavaScript solution without the ser round trip with a unknown header?

如何通过点击/点按将图像保存到用户移动图库?是否有一个没有带有未知标题的ser往返的JavaScript解决方案?

Edit: I also found the following questions but they do not have an answer. Save an image to the local folder from the website by clicking a link or button in mobile browser and Save an image to a mobile phone gallery from a browser

编辑:我也发现了以下问题,但他们没有答案。通过单击移动浏览器中的链接或按钮并从浏览器将图像保存到手机库,将图像从网站保存到本地文件夹

4 个解决方案

#1

Somebody seems to have answered this already,

有人似乎已经回答了这个,

<a href="/path/to/image" download="ImageName" title="ImageName">
    <img src="/path/to/image" alt="ImageName">
</a> It's not yet fully supported http://caniuse.com/#feat=download, but you can use with modernizr
http://modernizr.com/download/#-a_download (under Non-core detects) to support all browsers.

http://modernizr.com/download/#-a_download(在非核心检测下)支持所有浏览器。

Have not tested, but should work in mobiles as well.

尚未测试过,但也应该在手机中使用。

I would add that, as a server side solution, you could also add Response Headers to your download endpoint by

我想补充一点,作为服务器端解决方案,您还可以通过以下方式将响应标头添加到下载端点

Setting it up in apache (.htaccess) / nginx configuration

在apache(.htaccess)/ nginx配置中进行设置

Right from the code

从代码开始

#2

Use html5 download attribute as solution above by @theunexpected1. For browsers that don't support it, remove A tag to force user to right click or long touch to download

使用html5下载属性作为@theunexpected1的上述解决方案。对于不支持它的浏览器,删除标签以强制用户右键单击或长按以下载

<script>
var downloadAttrSupported = ("download" in document.createElement("a"))
if (!downloadAttrSupported){
   $('img.media').unwrap();
}
</script>

#3

Support for download attribute: http://caniuse.com/download

支持下载属性:http://caniuse.com/download

You can set headers on the server, if that's an option for you. The HTTP header you want to send is Content-Disposition: attachment; filename="imagename.jpg".

您可以在服务器上设置标头,如果这是您的选项。您要发送的HTTP标头是Content-Disposition:attachment;文件名= “imagename.jpg”。

Differs depending on your server..

根据您的服务器而有所不同..

In Node/Express:

// only on imgs
function(req, res){
    res.setHeader('Content-disposition', 'attachment; filename=imagename.jpg');
}

In the HTML:

在HTML中:

<a href="imagename.jpg">Download link</a>

Server will send Content-Disposition header when it gets the request for the file and force browsers to download.

服务器在收到文件请求时会发送Content-Disposition标头并强制浏览器下载。

#4

-1

The force-download for files usually opened by the browser can be done with the .htaccess file in the directory where your images are.

通常由浏览器打开的文件的强制下载可以使用图像所在目录中的.htaccess文件来完成。

It was replied previously here:

它先前在这里回复:

Force a file or image to download using .htaccess

使用.htaccess强制下载文件或图像

I haven't tested so don't know if it will work with mobile browsers though.

我没有测试过,所以不知道它是否适用于移动浏览器。

#1