vue中下载图片、下载字符流图片，将图片链接转换成base64格式进行下载

1. 一般情况下，我们可以使用 a 标签进行图片的下载，但有时候只是页面的跳转，并没有进行下载，此时可以加一个download属性。

  <a href="http://xxxx.xx.com:xx.jpg" target="_blank" download='xx.jpg'>

2. 将图片链接转换成base64格式，再进行下载。

HTML部分代码如下：

// 参数为可选项
<div @click="downloadImg('图片的地址', '图片的名称')">点击下载</div>

JS部分代码如下：

以下这个方法是根据图片的url返回一个base64编码：

getUrlBase64(imgUrl) {
   return new Promise(resolve => {
     let canvas = document.createElement('canvas')
     let ctx = canvas.getContext('2d')
     let img = new Image()
     //允许进行跨域
     img.crossOrigin = 'Anonymous' 
     img.src = imgUrl
     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)
     }
   })
 },

调用方法：

// url指点击时传入的图片地址
// name指点击时传入的图片名称
downloadImg(url, name) {
  this.getUrlBase64(url).then(base64 => {
     let link = document.createElement('a')
     link.href = base64
     link.download = name
     link.click()
   })
 },

标签：canvas,img,300,base64,let,图片链接,下载,图片
来源： https://blog.csdn.net/weixin_42881768/article/details/116494278