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)返回來的是一串圖片url，試了很多種方法，發(fā)現(xiàn)點(diǎn)擊下載時(shí)出來的效果，都是跳到一個(gè)新的圖片網(wǎng)頁，后來經(jīng)過一番琢磨，終于解決了這個(gè)問題：
這是后臺(tá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來下載圖片了。
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中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)
這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實(shí)戰(zhàn)，Vue項(xiàng)目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下2022-02-02
這篇文章主要介紹了vue mounted組件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了vue基礎(chǔ)語法之插值表達(dá)式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3中Watch監(jiān)聽事件的使用的相關(guān)資料，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下2023-02-02
監(jiān)聽屬性可以針對(duì)某個(gè)屬性進(jìn)行監(jiān)聽,當(dāng)監(jiān)聽的屬性的值發(fā)生了變化,則會(huì)執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽屬性的相關(guān)資料,需要的朋友可以參考下2021-11-11
Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)樣式幾種常用方法總結(jié)的相關(guān)資料,在我們的前端界面中,很多的地方的樣式都是不確定的狀態(tài),要根據(jù)其他內(nèi)容的變化而變化樣式的,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題
這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁,頁面可自適應(yīng)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09