最近在做一個前端.對接的功能模組時，需要實現一個下載圖片的功能，後臺返回來的是一串圖片url，試了很多種方法，發現點選下載時出來的效果，都是跳到一個新的圖片網NAEtO頁，後來經過一番琢磨，終於解決了這個問題：

這是後臺返回來的json資料（防止洩露重要資訊IP地址打碼了）：

我在html裡的引用是這樣的：

<a @click="downCom" >
                下載執照
                <i class="icon-down"></i>
              </a>

vue.js方法裡的下載圖片方法：

downCom() {
     NAEtO let that = this;
      this.$http.files().then(res => {
        let hreLocal="";
        hreLocal = res.data.data.url;
        this.downloadByBlob(hrhttp://www.cppcns.comeLocal,"pic")

      });
    },

下面這個方法，可以直接拿去用，直接把你的圖片url傳給這個方法，就可以實現vue.js來下載圖片了。

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,image.width,image.height)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        doNAEtO
 
wnload(url,name)
        // 用完釋放URL物件
        URL.revokeObjectURL(url)
      })
    }
  },

呼叫的download（url,name）方法：

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

完成上面的程式碼後，即可實現圖片下載，而不是圖片瀏覽啦。

最後成功實現點選即可下載圖片，效果圖如下：

到此這篇關於vue.js根據圖片url進行圖片下載的文章就介紹到這了,更多相關vue.js圖片url進行圖片下載內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！