用Javascript模拟“右击图片->另存为”操作

Question

好的，这里有一个与此问题完全相同的重复问题，但已经过去了2年，只有一个答案，而不是真正的解决方案。

因此，我有一张图片（缩略图），下面有2个按钮：查看和下载。

查看将在浏览器中打开图像（缓存）。而“下载”按钮将打开保存图像对话框。

现在我正在使用PHP的头Content-Disposition：attachment;用于下载按钮。

通常，访问者会先点击查看按钮进行预览（缩略图不是解决方案，因为需要验证细节和质量），特别是对于我的应用程序。

现在，我不希望文件再通过PHP读取，因为这需要时间。为了更好的用户体验，是否可能模拟“右键单击图像->另存为”以使下载对话框弹出，访问者只需单击一次即可下载？

- user1643156

Answer 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>​

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

我在这里创建了一个fiddle演示http://jsfiddle.net/aanred/75xaU/。希望能对你有所帮助。

- SubRed

---

我觉得你误解了我的意图。我希望当图片（或下载按钮）被点击时，浏览器直接显示下载对话框，并使用缓存的图片作为源，而不是再次从服务器端读取。无论如何，还是谢谢。 - user1643156

你应该设置标题为“由JavaScript触发的'Save Image As'”。但没关系，我知道只有使用execCommand()函数才能在IE上运行。 - SubRed

Answer 2

不，这是不可能的。您必须发送一个新的请求并使用HTTP头强制下载，就像您当前正在做的那样。

- bfavaretto

---

我们如何使用HTTP头强制下载？请帮忙。 - Rajdeep Singh

Answer 3

根据文档对象的技术规范，没有任何方法可以让您通过JavaScript强制下载文档/文件/资源。

- Abel Callejo

Answer 4

试试这个

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

- Xieranmaya