vue.js根據(jù)圖片url進(jìn)行圖片下載

更新時(shí)間：2021年06月29日 10:38:44 作者：朱季謙

最近在做一個(gè)前端vue.js對(duì)接的功能模塊時(shí)，需要實(shí)現(xiàn)一個(gè)下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進(jìn)行圖片下載，感興趣的可以了解一下

最近在做一個(gè)前端vue.js對(duì)接的功能模塊時(shí)，需要實(shí)現(xiàn)一個(gè)下載圖片的功能，后臺(tái)返回來(lái)的是一串圖片url，試了很多種方法，發(fā)現(xiàn)點(diǎn)擊下載時(shí)出來(lái)的效果，都是跳到一個(gè)新的圖片網(wǎng)頁(yè)，后來(lái)經(jīng)過(guò)一番琢磨，終于解決了這個(gè)問(wèn)題：

這是后臺(tái)返回來(lái)的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")

      });
    },

下面這個(gè)方法，可以直接拿去用，直接把你的圖片url傳給這個(gè)方法，就可以實(shí)現(xiàn)vue.js來(lái)下載圖片了。

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對(duì)象
        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()
}

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

最后成功實(shí)現(xiàn)點(diǎn)擊即可下載圖片，效果圖如下：

到此這篇關(guān)于vue.js根據(jù)圖片url進(jìn)行圖片下載的文章就介紹到這了,更多相關(guān)vue.js圖片url進(jìn)行圖片下載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue實(shí)現(xiàn)全局菜單搜索框的示例
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
el-form的model、prop屬性和表單校驗(yàn)等使用
本文主要介紹了el-form的model、prop屬性和表單校驗(yàn)等使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法
本篇文章主要介紹了vue中配置mint-ui報(bào)css錯(cuò)誤問(wèn)題的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
Vue3使用ref解決GetElementById為空的問(wèn)題
今天遇到一個(gè)問(wèn)題,就是在Vue3組件中需要獲取template中的元素節(jié)點(diǎn),使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問(wèn)題,需要的朋友可以參考下
2023-12-12
vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶(hù)端，在vue中數(shù)據(jù)請(qǐng)求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)的微信機(jī)器人聊天功能案例【附源碼下載】
這篇文章主要介紹了vue實(shí)現(xiàn)的微信機(jī)器人聊天功能,結(jié)合實(shí)例形式分析了基于vue.js的微信機(jī)器人聊天相關(guān)界面布局、ajax交互等操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2019-02-02
Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問(wèn)題詳解
這篇文章主要介紹了Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問(wèn)題詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
vue3中實(shí)現(xiàn)雙向數(shù)據(jù)綁定的方法
Vue3中,雙向數(shù)據(jù)綁定主要通過(guò)v-model指令實(shí)現(xiàn),v-model是一個(gè)語(yǔ)法糖,結(jié)合了v-bind和v-on指令來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它在內(nèi)部做了綁定數(shù)據(jù)和監(jiān)聽(tīng)輸入事件兩件事,感興趣的朋友跟隨小編一起看看吧
2024-12-12
Vue前端開(kāi)發(fā)之實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03