Javascript来模拟“右键点击图像 - >保存图像为”

好的，这个问题存在一个extact重复的问题，但它已经有2年的时间了，只有一个答案不是真正的解决方案。Javascript来模拟“右键点击图像 - >保存图像为”

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

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

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

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

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

来源

2012-11-29 user1643156

不，这是不可能的。正如你现在正在做的那样，你必须启动一个新的请求并使用http头强制下载。

来源

2012-11-29 02:24:32 bfavaretto

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

尝试使用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/创建小提琴。希望能帮助到你。

来源

2012-11-29 02:35:06 SubRed

我想你误解了我想在这里实现的目标。我希望当点击图像（或下载按钮）时，浏览器下载对话框直接显示，并使用缓存的图像作为源代码，而不是从服务器端再次读取。不管怎么说，还是要谢谢你。 – user1643156

您应该将标题“由JavaScript触发的图像另存为”设置为“”。但没关系没关系。据我所知它只能使用execCommand（）函数在IE上运行。 – SubRed

试试这个

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

来源

2013-09-11 01:58:22 Xieranmaya

按照Document Object的技术指标有没有方法，这将让你通过JavaScript强制下载的文件/文件/资源。

来源

2014-10-14 03:14:04

Javascript来模拟“右键点击图像 - >保存图像为”

回答

相关问题