HTML+JS 實現圖片下載到本地

原理：download 屬性是HTML5中新增的 <a> 標簽屬性。能夠讓我們指定瀏覽器下載文件時的默認名稱。將download屬性添加到<a>鏈接上，當我們點擊這個鏈接，download屬性值里的名稱會顯示到彈出的下載框里，而且download屬性能夠強制觸發下載操作。

方法一：通過<a>鏈接實現圖片下載

<a href="download.png" download="preview">
　　<img src="download.png" alt=""/>
</a>

方法二：通過JS觸發<a>鏈接實現圖片下載

<div class="downImageBtn">下載圖片</div>　

document.querySelector('.downImageBtn').addEventListener('click',function(){
    downloadIamge('.downImageBtn', '圖片的名稱')
})
            
function downloadIamge(selector, name) {
    var image = new Image()
    // 解決跨域 Canvas 污染問題
　　// crossorigin 是HTML5中新增的<img>標簽屬性
　　//　crossorigin屬性有兩個值可選：
　　//anonymous:如果使用這個值的話就會在請求中的header中的帶上origin屬性，但請求不會帶上cookie和其他的一些認證信息。
　　//use-credentials:這個同時會在跨域請求中帶上cookie和其他的一些認證信息。在使用這兩個值時都需要server端在response的header中帶上Access-Control-Allow-Credentials屬性。可以通過server的配置文件來開啟這個屬性：server開啟Access-Control-Allow-Credentials

 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { var canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height var context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) var url = canvas.toDataURL('image/png') // 生成一個a元素 var a = document.createElement('a') // 創建一個單擊事件 var event = new MouseEvent('click') // 將a的download屬性設置為我們想要下載的圖片名稱，若name不存在則使用‘下載圖片名稱’作為默認名稱 a.download = name || '下載圖片名稱' // 將生成的URL設置為a.href屬性 a.href = url // 觸發a的單擊事件  a.dispatchEvent(event); } image.src = document.querySelector(selector).getAttribute('src') }