關於使用js下載圖片

使用js進行圖片下載是很常見的需求，但是解決起來卻不是那麼順利。

伺服器返回了一個圖片地址，網上一搜基本都是用a標簽的download屬性，但是相容性實在是很差。這裡推薦使用blob。

上代碼：

 1 var xhr = new XMLHttpRequest()
 2 xhr.open('GET', url, true)
 3 xhr.responseType = 'blob'     
 4 xhr.onload = function () {
 5   if (xhr.status === 200) {         
 6     var blob = new Blob([xhr.response], {'type': 'application/octet-stream'})         
 7     saveAs(blob, filename)
 8   }
 9 }
10 xhr.send()

xhr.responseType 返回類型指明blob， 這樣返回的xhr.response 就是一個blob對象

{'type': 'application/octet-stream'}是為了相容safari

最後這個saveAs方法則是使用了file-saver這個庫

至此，圖片下載功能就完成了~