a標籤-跨域-下載

緣由：服務器存放圖片的地址發生了變動
現象：a標籤作的下載圖片操做沒法使用，會直接打開進行預覽
解決：
先將圖片轉爲base64格式而後在進行下載，封裝了兩個方法，具體看註釋

頁面代碼以下
<Button @click=downImg('https://xxx/xxx/xxx.png')>下載</Button>
downImg (url) {
const img = document.createElement('img')
img.crossOrigin = 'Anonymous' // 做用：能夠跨域。這裏必定要注意順序不能寫在下面，否則會報畫布被污染的錯誤
// 即：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
img.src = url
img.onload = () => {
// 調取封裝的轉base64的方法
const dataBase64 = getBase64Image(img)
// 作a標籤的下載處理
clickDown(dataBase64, '二維碼')
}
}

========================如下封裝的方法
/**
*
* a標籤下載設置
* @param
* 第一個參數爲下載的地址
* 第二個參數爲下載以後的文件名，不傳爲默認爲空
* @return 直接下載
*
*
* */
export function clickDown (url, name = '') {
const link = document.createElement('a')
link.href = url
link.download = name
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}

/**
*
* 將圖片轉爲base64格式
* @param 圖片對象
* @return base64字符串
*
* */
export function getBase64Image (img) {
if (!img) return
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
let ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
return canvas.toDataURL('image/' + ext)
}