1. 使用a標簽的download屬性。

<a href="https://geekjc-img.geekjc.com/logo.png" download="logo.png">下載圖片</a>

將a標簽的href屬性指向圖片的地址;同時增加download屬性;即可實現點擊下載.

download屬性的屬性值選填,代表下載圖片的名稱,如不填寫,則使用href中的圖片名稱,即圖片的原名稱.

a標簽的download屬性目前主流瀏覽器只有火狐和谷歌支持.

2. iframe標簽，生成iframe,src指向圖片地址,調用document.execCommand("SaveAs")方法.

這裏有瀏覽器兼容性問題：

在Trident內核瀏覽器(IE等)下,給按鈕(a標簽)綁定事件,使用創建<iframe>標簽方法;

在火狐,谷歌下使用<a>標簽的download屬性進行下載.

so ,

首先判斷瀏覽器,決定增加屬性,還是綁定事件;

在綁定事件的邏輯內,

首先判斷頁面是否存在指定的<iframe>,不存在則生成,存在則修改src屬性.

然後調用SaveAs命令進行保存.(document.execCommand(‘saveAs‘)

)

3. 舉例：

<iframe height="0" width="0" src="201782595503368.jpg"
 
 name="saveImage" id="saveImage"> </iframe> 
<a href="C:\Users\12580\Desktop\201782595503368.jpg" onclick="saveImage.document.execCommand(‘saveAs‘);">Click Me</a> a

點擊後，直接加載了圖片：

圖片點擊後直接下載