H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue怎么下载网络图片

方法一,用a标签配合download结果点击时跳转到图片的地址。

<img :src="miniProgramImg + 'admin/miniProgram.jpg'" alt="图片">
<a download="图片" :href="miniProgramImg + 'admin/miniProgram.jpg'">点击下载</a>

方法二,借助Base64实现任意文件下载

<img :src="miniProgramImg + 'admin/miniProgram.jpg'" alt="图片">
<span @click="downloadImg">点击下载</span>

downloadImg () {
  let href = this.miniProgramImg + 'admin/miniProgram.jpg'
  let canvas = document.createElement('canvas')
  let alink = document.createElement('a')
  alink.download = '图片'
  alink.style.display = 'none'
  let context = canvas.getContext('2d')
  context.drawImage(href, 0, 0)
  alink.href = canvas.toDataURL('image/jpg')
  document.body.appendChild(alink)
  alink.click()
  document.body.removeChild(alink)
}

此方法报错:Uncaught TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’

这里面的图片的路径都是写死的就是一张网络图片的地址,也许第一种方法是有跨域的问题导致下载不下来,但是我也不了解这个发生的原因,所以请求大佬答疑解惑,如何下载一张网络图片?

回答:

这得后端处理,网络图片想办法写个代理吧

本文地址:H5W3 » vue怎么下载网络图片

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址