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

Question

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.

I have seen this post: How can I create download link in 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/

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

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?

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

Answer 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.

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
• Right from the code

Answer 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

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

Answer 3

Support for download attribute: 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".

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:

<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.

Answer 4

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

It was replied previously here:

Force a file or image to download using .htaccess

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