在vue中下载图片

——文章适用于下载字符流图片

对于普通的图片下载，我们一般用a标签就可以实现，有时候我们需要下载从后端返回来的图片，返回结果有可能是字符流。这个时候如果我们还是用a标签去实现，就会发现只会发生路由跳转，并不能实现下载。
解决方法就是我们可以将图片链接转换成base64，再下载就可以了。

HTML部分

<div  class="link-wrapper" @click="download">下载</div>

js部分

getUrlBase64这个方法主要根据图片的url返回一个base64编码

getUrlBase64(url) {
      return new Promise(resolve => {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        let img = new Image()
        img.crossOrigin = 'Anonymous' //允许跨域
        img.src = url
        img.onload = function() {
          canvas.height = 300
          canvas.width = 300
          ctx.drawImage(img, 0, 0, 300, 300)
          let dataURL = canvas.toDataURL('image/png')
          canvas = null
          resolve(dataURL)
        }
      })
    },

调用部分

download() {
      this.getUrlBase64(‘此处传入图片链接’).then(base64 => {
        let link = document.createElement('a')
        link.href = base64
        link.download = 'qrCode.png'
        link.click()
      })
    },