使用Javascript來點擊並觸發下載動態生成的圖像

我正在做一個Web應用程序，它爲URL生成QR圖像（PNG格式）。如果URL更改，圖像也會更改。下面是HTML（尺寸參數表示QR圖像的大小）：使用Javascript來點擊並觸發下載動態生成的圖像

<div class="image"> 
    <img src="/img?size=150" />    
    <a href="#">download</a> 
</div>

我的目標是將圖像下載（而不是由瀏覽器渲染）當訪問者點擊下載鏈接。我怎樣才能做到這一點？

我搜索到了，發現使用Javascript下載靜態圖像的相關文章。這裏有什麼不同？

感謝您的幫助！

UPDATE

我發現這個鏈接SO對我的作品。

Download File Using Javascript/jQuery

實際上有是動態生成的圖像差或靜態的。此外，它保證任何文件類型的下載，無論瀏覽器設置如何。

來源

2016-11-11 curious1

，如果我理解你的問題好了，你可以在我上的jsfiddle例如不喜歡它（我使用jQuery的位置）： https://jsfiddle.net/v6qboyfm/

這裏是代碼：

$('a').on('click', function(e) { 
    var src = ($(e.currentTarget).closest('.image').find('img')[0].src); 
    $(e.currentTarget).attr('download', src); 
    $(e.currentTarget).click(); 
    e.preventDefault(); 
});

來源

2016-11-11 14:57:41

嗨斯特凡，謝謝你！您的方法無法阻止瀏覽器呈現它。其實，我發現這個鏈接對我很好：http://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery – curious1

如果你可以使用你的圖片的動態來源，那麼你也可以在你的錨點中使用它。就瀏覽器而言，實際圖片與通過某些php腳本動態生成的圖片沒有區別。因此，您可以使用下載屬性技巧來製作它只使用任何工作php

<div class="image"> 
    <img src="/img?size=150" />    
    <a href="/img?size=150" download="/img?size=150">download</a> 
</div>

來源

2016-11-11 15:57:14 Viney

新手，感謝您的輸入。我找到了我的解決方案。我也贊同你的意見。 – curious1

這很酷，但如果你使用這個解決方案，那麼你將不需要任何javascript – Viney

你的方式不能阻止瀏覽器打開文件。無論瀏覽器設置如何，我需要的是在任何瀏覽器和任何類型的文件下載。謝謝！ – curious1

使用Javascript來點擊並觸發下載動態生成的圖像

回答

相關問題