最近在做一個前端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) }) } },

調(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)圖片下載，而不是圖片瀏覽啦。

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

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