How can I create an Image Download Link in HTML for a Mobile Page?

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

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.