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)
}