使用JavaScript將圖片儲存至本地
阿新 • • 發佈:2018-12-30
在最近的開發當中,我們需要為img標籤以及canvas動態繪製的影象提供下載功能,下面是經過探索後我們得出的結果。
一、Canvas 版本
// 下載Canvas元素的圖片
functiondownloadCanvasIamge(selector, name) {
// 通過選擇器獲取canvas元素
var canvas = document.querySelector(selector)
// 使用toDataURL方法將影象轉換被base64編碼的URL字串
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)
}
// 呼叫方式
// 引數一: 選擇器,代表canvas
// 引數二: 圖片名稱,可選
downloadCanvasIamge('canvas', '圖片名稱')
二、img 標籤版本
// 下載
functiondownloadIamge(selector, name) {
// 通過選擇器獲取img元素
var img = document.querySelector(selector)
// 將圖片的src屬性作為URL地址
var url = img.src
var a = document.createElement('a')
var event = new MouseEvent('click')
a.download = name || '下載圖片名稱'
a.href = url
a.dispatchEvent(event)
}
// 呼叫方式
// 引數一: 選擇器,代表img標籤
// 引數二: 圖片名稱,可選
downloadIamge('canvas', '圖片名稱')
改進版
由於跨域會導致a標籤在部分瀏覽器中會直接開啟新標籤頁,所以改進如下
functiondownloadIamge(selector, name) {
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 || '下載圖片名稱'
// 將生成的URL設定為a.href屬性
a.href = url
// 觸發a的單擊事件
a.dispatchEvent(event)
}
image.src = document.querySelector(selector).src
}
// 呼叫方式
// 引數一: 選擇器,代表img標籤
// 引數二: 圖片名稱,可選
downloadIamge('canvas', '圖片名稱')
三、總結
我們主要使用的是a標籤的download屬性, 下面為MDN給出的說明:
此屬性指示瀏覽器下載URL而不是導航到URL,因此將提示使用者將其儲存為本地檔案。
如果屬性有一個值,它將在儲存提示中用作預先填寫的檔名 (使用者仍然可以根據需要更改檔名)。對允許的值沒有限制,但是/和\被轉換為下劃線。大多數檔案系統限制檔名中的一些標點符號,瀏覽器會相應地調整建議的名稱。
需要注意的地方:
- 此屬性僅適用於同源 URLs。
- 可以使用 blob: URLs 和 data: URLs 以方便使用者下載 JavaScript 方式生成的內容(例如使用線上繪圖的Web應用建立的照片)。
- 如果HTTP頭的Content-Disposition:存在,並且賦予了一個和這個屬性不同的檔名,HTTP頭優先於此屬性。
- 如果這個屬性存在 Content-Disposition 被設定為 inline,火狐優先 Content-Disposition,像之前檔名的情況下,而Chrome則優先 download 屬性。
參考地址: