用JavaScript下載圖片

現在我有一個canvas，我想將它保存爲PNG。我可以用所有那些複雜的文件系統API來做到這一點，但我並不喜歡它們。用JavaScript下載圖片

我知道是否有關於它download屬性的鏈接：

<a href="img.png" download="output.png">Download</a>

如果用戶點擊它，它會下載該文件。因此，我想出了這個：

$("<a>") 
    .attr("href", "img.png") 
    .attr("download", "output.png") 
    .appendTo("body") 
    .click() 
    .remove();

演示：http://jsfiddle.net/DerekL/Wx7wn/

然而，它似乎並沒有工作。它是否必須由用戶操作觸發？否則爲什麼它不工作？

來源

2013-06-26 Derek 朕會功夫

我假設你正在使用支持其瀏覽器？ http://caniuse.com/download – Ian

@Ian我使用的是Chrome，它支持它。 –

我似乎無法讓它使用我提供的名稱 - 可以嗎？ – drzaus

的問題是jQuery不會觸發本地click事件<a>元素讓導航不會發生（的<a>的正常行爲），所以你需要做手工。對於幾乎所有其他場景，本地DOM事件被觸發（至少試圖 - 它在try/catch中）。

手動觸發它，嘗試：

var a = $("<a>") 
    .attr("href", "http://i.stack.imgur.com/L8rHf.png") 
    .attr("download", "img.png") 
    .appendTo("body"); 

a[0].click(); 

a.remove();

DEMO：http://jsfiddle.net/HTggQ/

在當前的jQuery源

if ((!special._default || special._default.apply(eventPath.pop(), data) === false) && 
     jQuery.acceptData(elem)) {

來源

2013-06-26 04:43:59 Ian

這可以放在一個.each（）嗎？我似乎只能使用這種技術一次下載一個圖像，可能與重載變量有關... – bafromca

[我認爲你不需要從DOM上附加/刪除它]（http：// jsfiddle.net/HTggQ/93/） - 你應該能夠調用'$（''）.attr（...）[0] .click（）' – drzaus

或者[甚至更好，沒有jquery]（ http://stackoverflow.com/a/16523173/1037948） - http://jsfiddle.net/HTggQ/95/ – drzaus

作爲@Ian explained，問題是jQuery的click()與本地不一樣。

因此，可以考慮使用香草JS，而不是jQuery的：

var a = document.createElement('a'); 
a.href = "img.png"; 
a.download = "output.png"; 
document.body.appendChild(a); 
a.click(); 
document.body.removeChild(a);

Demo

來源

2015-03-05 23:54:56 Oriol

+19

爲什麼downvote？是否因爲[沒有足夠的jQuery]（http://i.stack.imgur.com/sGhaO.gif）？ – Oriol

我上傳了你的評論和你的答案。沒有解釋的Downvotes沒有幫助。 –

謝謝@Oriol。我喜歡香草！ –

用JavaScript下載圖片

回答

相關問題