Javascript模拟“右键点击图片 - >将图片另存为”

时间:2012-11-29 02:11:50

标签: javascript download simulate

好的,这个问题已经有了一个重复的问题,但已经过了2年了,而且只有一个答案不是真正的解决方案。

所以,我有一个图像(缩略图),在它下面有2个按钮:ViewDownload

View将在浏览器中打开图像(缓存)。 “下载”按钮将打开“保存图像”对话框。

现在我正在使用PHP的标题Content-Disposition: attachment;作为下载按钮。

通常,访问者会先点击View按钮进行预览(缩略图不是解决方案,因为需要验证详细信息和质量),尤其是对于我自己的应用。

现在,我真的不希望通过PHP再次读取该文件,因为它需要时间。为了获得更好的用户体验,可以模拟“右键点击图片 - >将图片另存为”,以便弹出下载对话框,访问者只需点击一下即可下载?

4 个答案:

答案 0 :(得分:0)

不,这是不可能的。您必须触发新请求并使用http标头强制下载,正如您目前所做的那样。

答案 1 :(得分:0)

根据Document Object的技术规范,无方法允许您通过JavaScript强制下载文档/文件/资源​​。

答案 2 :(得分:-1)

尝试使用oncontextmenu这样的事件:

HTML:

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

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

使用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;
}

我还在这里为演示http://jsfiddle.net/aanred/75xaU/创建了小提琴。希望它有所帮助。

答案 3 :(得分:-1)

试试这个

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