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

對于普通的圖片下載，我們一般用a標簽就可以實現，有時候我們需要下載從后端返回來的圖片，返回結果有可能是字符流。這個時候如果我們還是用a標簽去實現，就會發現只會發生路由跳轉，并不能實現下載。
解決方法就是我們可以將圖片鏈接轉換成base64，再下載就可以了。

HTML部分

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

js部分

getUrlBase64這個方法主要根據圖片的url返回一個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)}})},

調用部分

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

?

?

總結

以上是生活随笔為你收集整理的vue中下载图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。