CODEWITHSUNDEEP
javascriptdownloadsimulate
user1643156
user1643156

Reputation: 4537

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?

Upvotes: 5

Views: 10675

Answers (4)

Abel Callejo
Abel Callejo

Reputation: 14939

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.

Upvotes: 0

Xieranmaya
Xieranmaya

Reputation: 792

Try this

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

Upvotes: -2

SubRed
SubRed

Reputation: 3187

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.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

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

Upvotes: 0

Related Questions