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

Answer 1

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 2

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.

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

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