如果使用a標簽指向一個圖片的話徒扶，你會發(fā)現(xiàn)點擊鏈接時它會直接在瀏覽器中打開圖片并顯示:
<a />
但是這樣的話绎晃，就存在一個問題赁豆，如果我想點擊a鏈接直接下載圖片到本地波附，該怎么實現(xiàn)呢艺晴？
在查閱資料之后，發(fā)現(xiàn)a標簽有一個download的屬性掸屡，添加了該屬性封寞，a標簽將直接下載文件，并根據(jù)download屬性的值設(shè)置下載文件的文件名仅财，不為download屬性設(shè)置值則文件將以默認文件名下載:
<!-- 文件名為默認名稱 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 文件名為baidu.gif -->
<a href="./baidu_jgylogo3.gif" download="baidu" />
<!-- 文件名為baidu.png -->
<a href="./baidu_jgylogo3.gif" download="baidu.png" />
但是這個辦法有一個弊端狈究，它僅支持同源鏈接下載，非同源鏈接還是會直接打開圖片:
<!-- 同源鏈接能下載圖片 -->
<a href="./baidu_jgylogo3.gif" download />
<!-- 非同源鏈接download屬性會無效盏求，瀏覽器會直接打開圖片 -->
<a download />
嘗試了將圖片轉(zhuǎn)成Base64或者Blob的辦法:
function downloadImgByBlob(url) {
var img = new Image()
img.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
// 將img中的內(nèi)容畫到畫布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 將畫布內(nèi)容轉(zhuǎn)換為Blob
canvas.toBlob((blob) => {
// blob轉(zhuǎn)為同源url
var blobUrl = window.URL.createObjectURL(blob)
// 創(chuàng)建a鏈接
var a = document.createElement('a')
a.href = blobUrl
a.download = ''
// 觸發(fā)a鏈接點擊事件抖锥，瀏覽器開始下載文件
a.click()
})
}
img.src = url
// 必須設(shè)置亿眠，否則canvas中的內(nèi)容無法轉(zhuǎn)換為blob
img.setAttribute('crossOrigin', 'Anonymous')
}
function downloadImgByBase64(url) {
var img = new Image()
img.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
// 將img中的內(nèi)容畫到畫布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
// 將畫布內(nèi)容轉(zhuǎn)換為base64
var base64 = canvas.toDataURL()
// 創(chuàng)建a鏈接
var a = document.createElement('a')
a.href = base64
a.download = ''
// 觸發(fā)a鏈接點擊事件，瀏覽器開始下載文件
a.click()
}
img.src = url
// 必須設(shè)置磅废，否則canvas中的內(nèi)容無法轉(zhuǎn)換為base64
img.setAttribute('crossOrigin', 'Anonymous')
}
上述兩種方法效果都不太理想纳像。因為這兩種方法僅支持生成jpeg和png格式圖片。如果是gif圖拯勉，僅能顯示第一幀的內(nèi)容竟趾。
后來在download.js官網(wǎng)中看到了如下的示例：
var x=new XMLHttpRequest();
x.open("GET", "http://danml.com/wave2.gif", true);
x.responseType = 'blob';
x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/gif" ); }
x.send();
該示例的思路是，通過XMLHttpRequest()請求圖片鏈接谜喊，然后獲取返回的Blob潭兽。那結(jié)合上面下載圖片的方法，就能下載圖片了:
var x=new XMLHttpRequest();
x.open("GET", "http://danml.com/wave2.gif", true);
x.responseType = 'blob';
x.onload=function(e){
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = ''
a.click()
}
x.send();
通過這種方法下載圖片斗遏，gif圖也能夠顯示正常了山卦。
注意，上述方法能夠兼容大部分瀏覽器诵次，但是不兼容IE瀏覽器(不支持download屬性)账蓉。要兼容IE瀏覽器需要用其他辦法。
