11

When a user clicks on an image on a web page, I'd like to trigger the browser's Save Image dialog and to let the user save the image on their hard drive. Is there a cross-browser way to do this with jQuery/Javascript?

John Mac
  • 2,530
  • 4
  • 24
  • 30

5 Answers5

11

Not precisely, but you can do it by 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.

Craig Stuntz
  • 125,891
  • 12
  • 252
  • 273
  • 2
    as Craig says, just wrap the image with a hyperlink, that points to a file (with the appropriate headers set) to download. – scunliffe Dec 30 '08 at 04:50
  • Good clarification; I'll add it to the answer. – Craig Stuntz Dec 30 '08 at 13:26
  • I've never heard of application/x-download, but I have heard of application/octet-stream. – Powerlord Dec 30 '08 at 13:29
  • From TFA: "[...] to a nonstandard value such as application/x-download. It's very important that this header is something unrecognized by browsers because browsers often try to do something special when they recognize the content type." – Craig Stuntz Dec 30 '08 at 14:17
2

The only thing that comes to my mind is the document.execCommand("SaveAs") of Internet Explorer, you can open a window or use a hidden iframe with the url of your image, and then call it...

Check (with IE of course) this example I've done.

Christian C. Salvadó
  • 807,428
  • 183
  • 922
  • 838
1

you can create a hidden file-input field and trigger() this one, when you click on your image:

$('.yourImageClass').click(function(){
 $('.hiddenInputClass').trigger('click');
})
mheg
  • 111
  • 1
  • 4
0

Google Webstore
Github

I made an extension that does something like this, if anyone here is still interested. It uses an XMLHTTPRequest to grab the object, which in this case is presumed to be an image, then makes an ObjectURL to it, a link to that ObjectUrl, and clicks on the imaginary link.

In your case, you could just change ondragend to onclick and selectively add it to images.

DrJKL
  • 43
  • 1
  • 4
0

I don't imagine so - a lot of the basic browser functionality (eg: Print Preview) isn't available to Javascript.

nickf
  • 537,072
  • 198
  • 649
  • 721