——文章適用于下載字符流圖片

對于普通的圖片下載，我們一般用a標簽就可以實現(xiàn)，有時候我們需要下載從后端返回來的圖片，返回結(jié)果有可能是字符流。這個時候如果我們還是用a標簽去實現(xiàn)，就會發(fā)現(xiàn)只會發(fā)生路由跳轉(zhuǎn)，并不能實現(xiàn)下載。
解決方法就是我們可以將圖片鏈接轉(zhuǎn)換成base64，再下載就可以了。

HTML部分

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

js部分

getUrlBase64這個方法主要根據(jù)圖片的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)
        }
      })
    },

調(diào)用部分

download() {
      this.getUrlBase64(‘此處傳入圖片鏈接’).then(base64 => {
        let link = document.createElement('a')
        link.href = base64
        link.download = 'qrCode.png'
        link.click()
      })
    },