Javascript to simulate "right click on image -> save image as"

Question

OK, there has been an extact duplicate question as this one, but it's been 2 years away, and there's only one answer which was not really a solution.

So, I have an image (thumbnail), right below it there are 2 buttons: View and Download.

View will open the image in browser (cached). And the Download button will open the Save Image dialog.

Right now I'm using PHP's header Content-Disposition: attachment; for the download button.

Generally, visitors will first hit the View button to preview (thumbnail is not a solution since details and quality need to be verified), especially for my own app.

Now, I don't really want the file to be read again through PHP since it takes time. And for a better user experience, is it possible to simulate "right click on image -> save image as" so the download dialog pops up, and visitors only need one single click to download?

score 0 · Answer 1 · answered Nov 29 '12 at 02:24

0

No, it's not possible. You must fire a new request and force the download using http headers, as you're currently doing.

answered Nov 29 '12 at 02:24

bfavaretto

71,580
16
111
150

How can we force the download using http headers, please help? – Rajdeep Singh Dec 29 '15 at 10:25

score 0 · Answer 2 · answered Oct 14 '14 at 03:14

0

According to the technical specifications of the Document Object there is no method that will allow you to force download a document/file/resource through JavaScript.

answered Oct 14 '14 at 03:14

Abel Callejo

13,779
10
69
84

score -1 · Answer 3 · answered Nov 29 '12 at 02:35

Try to use oncontextmenu event like this the idea:

HTML:

<div id="image">
YOUR IMAGE
</div>

<div id="contextmenu" style="display: none">
<ul>
    <li>YOUR LINK TO DOWNLOAD IMAGE</li>
</ul>
</div>

Script using jQuery:

var img = document.getElementById("image");
img.oncontextmenu = function(e){
    e.preventDefault();

    contextmenu = $("#contextmenu");
    contextmenu.css("top",(e.pageY) + "px")
        .css("z-index","9999")
        .css("left",(e.pageX) + "px");

    contextmenu.fadeIn('fast');    
    return false;
};

$("#image").click(function(){
    $("#contextmenu").hide();
});

CSS:

#image {
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.2);
}
#contextmenu{
    position:fixed;
    background: white;
}

I also create fiddle here for the demo http://jsfiddle.net/aanred/75xaU/. Hope it helps.

I think you misunderstood what I'm trying to achieve here. I want that when the image (or the download button) is clicked, the browser download dialog shows up directly and use the cached image as source instead of reading it again from server side. thanks anyway. — user1643156, Nov 29 '12 at 02:42
You should set the title "'Save Image As' triggered by javascript". But it's ok nevermind. As I know it will only work on IE by using execCommand() function. — SubRed, Nov 29 '12 at 03:15

score -2 · Answer 4 · answered Sep 11 '13 at 01:58

-2

Try this

<a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......" download="save-name.jpg">Click me to download the img</a>

answered Sep 11 '13 at 01:58

Xieranmaya

792
10
11

Javascript to simulate "right click on image -> save image as"

4 Answers4