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?

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?

• javascript
• download
• simulate

4 Answers 4

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

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/aanred/75xaU/. Hope it helps.

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.

Try this

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