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

 

 

JEECG官方博客 CSDN认证博客专家 机器学习 深度学习 开源达人
专注技术开源,打造开源的JAVA快速开发平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值