Javascript模拟“右键单击图像->将图像另存为”答案

【问题标题】：Javascript to simulate "right click on image -> save image as"Javascript模拟“右键单击图像->将图像另存为”
【发布时间】：2012-11-29 02:11:50
【问题描述】：

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

所以，我有一张图片（缩略图），它的正下方有 2 个按钮：View 和 Download。

View 将在浏览器中打开图像（缓存）。下载按钮将打开保存图像对话框。

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

一般来说，访问者会先点击View按钮进行预览（缩略图不是解决方案，因为需要验证细节和质量），尤其是对于我自己的应用程序。

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

【问题讨论】：

标签： javascript download simulate

【解决方案1】：

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

【讨论】：

如何使用http头强制下载，请帮忙？

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试使用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/ 创建小提琴。希望对您有所帮助。

【讨论】：

我认为您误解了我在这里想要实现的目标。我希望当单击图像（或下载按钮）时，浏览器下载对话框直接显示并使用缓存的图像作为源，而不是从服务器端再次读取它。无论如何，谢谢。
你应该设置标题“'Save Image As'由javascript触发”。不过没关系。据我所知，它只能通过使用 execCommand() 函数在 IE 上运行。

【解决方案4】：

试试这个

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

【讨论】：