How to download Internet Pictures by vue

method 1, use the a tag with the download result to jump to the address of the picture when clicked.

<img :src="miniProgramImg + "admin/miniProgram.jpg"" alt="">
<a download="" :href="miniProgramImg + "admin/miniProgram.jpg""></a>

method 2, download any file with the help of 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)
}

this method reports an error: 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)"

the path of the picture in this is written dead, that is, the address of a network picture. Perhaps the first method is that there is a cross-domain problem that can not be downloaded, but I do not understand the reason for this, so I ask the boss to answer questions. How to download a network picture?

Oct.03,2021

this has to be processed at the back end. Find a way to write an agent for network pictures

.
Menu