前段時間，項目有一種需求，就是實現點擊圖片時，可以將圖片下載到本地。類似我們在瀏覽網頁時看到好看的圖片，右鍵然後選擇存儲的效果差不多，當時做的時候每次點擊圖片時都會打開一個新窗口。把圖片在新窗口中展示出來。並不能起到下載到本地的效果，後來上網搜了下，找到了一個方法，今天整理一下。
舉例：
首先創建一個index.html
爲了方便展示，不再創建js文件，js代碼寫在html文件中
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<img src="https://pic1.zhimg.com/v2-53f365acc16201ef0248646a3caf55e1_1200x500.jpg" alt="" onclick="downloadIamge('img','自行車女孩')">
<body>
<script>
function downloadIamge(selector, name) {
// 創建一個img標籤
var image = new Image()
// 解決跨域 Canvas 污染問題
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 || 'one' // one是默認的名稱
// 將生成的URL設置爲a.href屬性
a.href = url
// 觸發a的單擊事件
a.dispatchEvent(event)
}
image.src = document.querySelector(selector).src
}
</script>
</body>
</html>
當點擊圖片時的效果如下圖：
然後就可以在本地查找下載的內容中找到這張圖片
