vue.js根據(jù)圖片url進行圖片下載
更新時間：2021年06月29日 10:38:44 作者：朱季謙
最近在做一個前端vue.js對接的功能模塊時，需要實現(xiàn)一個下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進行圖片下載，感興趣的可以了解一下
最近在做一個前端vue.js對接的功能模塊時，需要實現(xiàn)一個下載圖片的功能，后臺返回來的是一串圖片url，試了很多種方法，發(fā)現(xiàn)點擊下載時出來的效果，都是跳到一個新的圖片網(wǎng)頁，后來經(jīng)過一番琢磨，終于解決了這個問題：
這是后臺返回來的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)
})
}
},
調用的download（url,name）方法：
function download(href, name) {
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.href = href
eleLink.click()
eleLink.remove()
}
完成上面的代碼后，即可實現(xiàn)圖片下載，而不是圖片瀏覽啦。
最后成功實現(xiàn)點擊即可下載圖片，效果圖如下：
到此這篇關于vue.js根據(jù)圖片url進行圖片下載的文章就介紹到這了,更多相關vue.js圖片url進行圖片下載內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了Vue實現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
本文主要介紹了el-form的model、prop屬性和表單校驗等使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
Vue3使用ref解決GetElementById為空的問題
今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下2023-12-12
vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
vue實現(xiàn)的微信機器人聊天功能案例【附源碼下載】
這篇文章主要介紹了vue實現(xiàn)的微信機器人聊天功能,結合實例形式分析了基于vue.js的微信機器人聊天相關界面布局、ajax交互等操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了Vue結合后臺導入導出Excel問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue3中實現(xiàn)雙向數(shù)據(jù)綁定的方法
Vue3中,雙向數(shù)據(jù)綁定主要通過v-model指令實現(xiàn),v-model是一個語法糖,結合了v-bind和v-on指令來實現(xiàn)數(shù)據(jù)的雙向綁定,它在內部做了綁定數(shù)據(jù)和監(jiān)聽輸入事件兩件事,感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)交錯過渡動畫效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03