文章適用于下載字符流圖片

對(duì)于普通的圖片下載，我們一般用a標(biāo)簽就可以實(shí)現(xiàn)，有時(shí)候我們需要下載從后端返回來(lái)的圖片，返回結(jié)果有可能是字符流。這個(gè)時(shí)候如果我們還是用a標(biāo)簽去實(shí)現(xiàn)，就會(huì)發(fā)現(xiàn)只會(huì)發(fā)生路由跳轉(zhuǎn)，并不能實(shí)現(xiàn)下載。
解決方法就是我們可以將圖片鏈接轉(zhuǎn)換成base64，再下載就可以了。

HTML部分

<div class="link-wrapper" @click="download">下載</div>

js部分

getUrlBase64這個(gè)方法主要根據(jù)圖片的url返回一個(gè)base64編碼

getUrlBase64(url) {return new Promise(resolve => {let canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')let img = new Image()img.crossOrigin = 'Anonymous' //允許跨域img.src = urlimg.onload = function() {canvas.height = 300canvas.width = 300ctx.drawImage(img, 0, 0, 300, 300)let dataURL = canvas.toDataURL('image/png')canvas = nullresolve(dataURL)}})},

調(diào)用部分

download() {this.getUrlBase64(‘此處傳入圖片鏈接’).then(base64 => {let link = document.createElement('a')link.href = base64link.download = 'qrCode.png'link.click()})},

?

?

總結(jié)

以上是生活随笔為你收集整理的vue中下载图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。