vue怎么實現(xiàn)根據(jù)圖片url進(jìn)行圖片下載

這篇“vue怎么實現(xiàn)根據(jù)圖片url進(jìn)行圖片下載”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實現(xiàn)根據(jù)圖片url進(jìn)行圖片下載”文章吧。

后臺返回來的json數(shù)據(jù)（防止泄露重要信息IP地址打碼了）：

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

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

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

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

      });
    },

下面這個方法，可以直接拿去用，直接把你的圖片url傳給這個方法，就可以實現(xiàn)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, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        download(url,name)
        // 用完釋放URL對象
        URL.revokeObjectURL(url)
      })
    }
  },

調(diào)用的download（url,name）方法：

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

完成上面的代碼后，即可實現(xiàn)圖片下載，而不是圖片瀏覽啦。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上就是關(guān)于“vue怎么實現(xiàn)根據(jù)圖片url進(jìn)行圖片下載”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。