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來模擬「右鍵點擊圖像 - >保存圖像爲」

回答

相關問題