vue下载跨域图片

<a style="color: #409EFF;" @click="downImg(url)">下载还款凭证</a>


//方法一   （只有这种方法解决我的需求）
downImg(imgsrc) {
      const src = `${imgsrc}?t=${new Date().getTime()}`
      fetch(src).then(res => {
        res.blob().then(myBlob => {
          const href = URL.createObjectURL(myBlob)
          const a = document.createElement('a')
          a.href = href
          a.download = '凭证.jpg'
          a.click()
          a.remove()
        })
      })
    }
 
//方法二   （个别适用,有事也会显示跨域）
downImg(imgsrc) {
	const image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function() {
        const canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        const context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        const url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        const a = document.createElement('a') // 生成一个a元素
        const event = new MouseEvent('click') // 创建一个单击事件
        a.download = 'name' || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
}

效果图

//根据个人需求选择方法