clickable image with save as option

Question

Ive got images on my website. I would like to create functionality that if user clicks on that image save as window appear and the one can save image.

I wrote something like this:

<a href="/foto1.png" target="_blank">
   <img src="/foto1.png" alt="" />
</a>

And it works but opens new tab till user clicks save or close save as window. Is it possible to get rid of new tab ?

Thanks for any suggestions

For opening up Save as dialog you need a send the image from the server using HTTP response Content disposition header http://www.jtricks.com/bits/content_disposition.html — Mikko Ohtamaa, Jan 11 '12 at 23:21

score 2 · Accepted Answer · edited May 23 '17 at 10:24

i would change your mark up and include all the images you want saved in one container, this however will only work in IE i'm afraid so:

<div id="imagesToSave">
    <a href="/foto1.png" target="_blank">
       <img src="/foto1.png" alt="" />
    </a>
</div>

Then with jquery use this code:

$('#imagesToSave img').click(function(){
    document.execCommand('SaveAs',true,'file.html');
});

For another browsers, which you'll obviously want to do think about this by Craig Stuntz:

hyperlinking to the img file and setting the content-type and content-disposition headers in the server response. Try, e.g., application/x-download, plus the other headers specified here.

good luck

clickable image with save as option

1 Answers1