vue中使用图片url直接下载图片

本文介绍了如何在Vue应用中利用Blob对象和canvas的drawImage方法，处理跨域问题，实现从给定的图片URL直接下载图片，无需刷新页面。

为了大家方便使用，封装成了一个函数。

// 通过Blob方式下载图片（解决跨域问题）
downloadByBlob(url, name) {
  // 创建Image对象用于加载图片
  let image = new Image()
  
  // 设置跨域属性（需要服务器允许跨域）
  image.setAttribute('crossOrigin', 'anonymous') 
  
  // 设置图片源地址
  image.src = url
  
  // 图片加载完成后的回调
  image.onload = () => {
    // 创建canvas元素用于图像处理
    let canvas = document.createElement('canvas')
    
    // 设置canvas尺寸与原始图片相同
    canvas.width = image.width
    canvas.height = image.height
    
    // 获取2D渲染上下文
    let ctx = canvas.getContext('2d')
    
    // 将图片绘制到canvas上
    ctx.drawImage(image, 0, 0, image.width, image.height)
    
    // 将canvas内容转为Blob对象
    canvas.toBlob((blob) => {
      // 生成Blob对象的临时URL
      let url = URL.createObjectURL(blob)
      
      // 调用下载方法
      this.download(url, name)
      
      // 释放创建的URL对象（重要：避免内存泄漏）
      URL.revokeObjectURL(url)
    })
  }
},

// 通用下载方法
download(href, name) {
  // 创建隐藏的<a>标签
  let eleLink = document.createElement('a')
  
  // 设置下载的文件名
  eleLink.download = name
  
  // 设置下载链接
  eleLink.href = href
  
  // 模拟点击触发下载
  eleLink.click()
  
  // 移除临时创建的<a>标签
  eleLink.remove()
},

复制粘贴 直接调用即可

downloadByBlob('http://********/home/record/227/197/233/164/AEgAAhQ-QVKng2Fv.png','下载图片的名字')