Open the Save Image dialog using jQuery/Javascript?

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?

Answers:

Answer

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.

Answer

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.

Answer

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

Answer

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.

Answer

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

$('.yourImageClass').click(function(){
 $('.hiddenInputClass').trigger('click');
})

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.