vue.js downloads pictures according to picture url

Recently, when I was working on a front-end vue.js docking function module, I needed to implement a function to download pictures. The backend returned a string of picture URLs. I tried many methods and found that the effect when clicking download was to jump to a new picture web page. After some thinking, I finally solved this problem:

This is the json data returned by the backend (IP address is coded to prevent leakage of important information):

My reference in html is like this:

<a @click="downCom" >
                Download License<i class="icon-down"></i>
              </a>

Download image method in vue.js method:

downCom() {
      let that = this;
      this.$http.files().then(res => {
        let hreLocal="";
        hreLocal = res.data.data.url;
        this.downloadByBlob(hreLocal,"pic")

      });
    },

The following method can be used directly. Just pass your image URL to this method, and you can implement vue.js to download the image.

downloadByBlob(url,name) {
    let image = new Image()
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = url
    image.onload = () => {
      let canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      let ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        download(url,name)
        // Release the URL object after use URL.revokeObjectURL(url)
      })
    }
  },

The download(url,name) method called:

function download(href, name) {
  let eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}

After completing the above code, you can download pictures instead of browsing them.

Finally, you can successfully click to download the picture, the effect is as follows:

This is the end of this article about vue.js downloading pictures according to picture url. For more relevant vue.js picture url downloading content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!