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: /

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

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

• javascript
• html
• google-chrome
• mobile
• mobile-safari

• This may work: stackoverflow.com/questions/16124064/… – user2980344 Commented Mar 11, 2014 at 23:10
• This may work: stackoverflow.com/questions/16124064/… or this stackoverflow.com/questions/7461535/… – user2980344 Commented Mar 11, 2014 at 23:12
• Not it is not working on iOS. – Michael Commented Mar 12, 2014 at 14:42
• HTML5 download attribute wont work with Safari, you should find any alternative. – manukv Commented Mar 17, 2014 at 12:47
• 1 I guess you are building an awesome image editor for mobiles, that allows users to save their work to their mobile. The mobile browsers are not ready for it yet, since there is no secure way for a web app to interact and access the file systems of the mobile. HTML5 File API has come a long way, and even longer way left. Even if there is a hack, it ll probably leave you the worse since it may not work cross-mobile. My best bet would be to go for a cross-platform tool that fits the bill. Just my two cents. – aravind Commented Mar 20, 2014 at 19:24

4 Answers 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

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.

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>

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.