vue图片保存到本地

适用于下载字符流图片

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

HTML部分

js部分

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

如果属于静态图片

download () {
    const link = document.createElement('a')
    link.href = require('@/assets/img/kyy/qrcode.jpg')
    console.log(link.href)
    link.download = 'qrCode.jpg'
    link.click()
}

或图片文件保存

const x = new window.XMLHttpRequest()
x.open('GET', file.url, true)
x.responseType = 'blob'
x.onload = () => {
  const url = window.URL.createObjectURL(x.response)
  const a = document.createElement('a')
  a.href = url
  a.download = file.file_name
  a.click()
}
x.send()