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

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?

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

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.

Solution 4:^[4]

Try this

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bfavaretto
Solution 2	Abel Callejo
Solution 3	SubRed
Solution 4	Xieranmaya

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]