當(dāng)我們處理圖片下載功能的時(shí)候，如果本地的圖片，那么是可以通過(guò)canvas獲得圖片的base64的，方法如下。但是如果圖片的url存在跨域問(wèn)題的話(huà)，下面的方法將行不通，這時(shí)候我們可以另辟蹊徑，將后臺(tái)的同學(xué)，將圖片以base64的形式進(jìn)行返回。

function getBase64(url){ //通過(guò)構(gòu)造函數(shù)來(lái)創(chuàng)建的 img 實(shí)例，在賦予 src 值后就會(huì)立刻下載圖片，相比 createElement() 創(chuàng)建 <img> 省去了 append()，也就避免了文檔冗余和污染 var Img = new Image(), dataURL=’’; Img.src=url; Img.onload=function(){ //要先確保圖片完整獲取到，這是個(gè)異步事件 var canvas = document.createElement('canvas'), //創(chuàng)建canvas元素 width=Img.width, //確保canvas的尺寸和圖片一樣 height=Img.height; canvas.width=width; canvas.height=height; canvas.getContext('2d').drawImage(Img,0,0,width,height); //將圖片繪制到canvas中 dataURL=canvas.toDataURL(’image/jpeg’); //轉(zhuǎn)換圖片為dataURL };}2. 處理base64，進(jìn)行下載

處理base64的時(shí)候有兩點(diǎn)要注意，一個(gè)是對(duì)ie瀏覽器的處理，一個(gè)是對(duì)火狐瀏覽器的處理

1.由于后臺(tái)返回的是純base64，如果要完成圖片的下載功能，必須加上一個(gè)前綴

<template> <a :href='http://www.aoyou183.cn/bcjs/prefixBase64 + qrBase64' rel='external nofollow' rel='external nofollow' download='qrcode.png' > <img src='http://www.aoyou183.cn/bcjs/static/img/load.png'> </a></template> <script> ... data () { return { qrBase64: ’’, // 二維碼對(duì)應(yīng)的base64（在方法里面進(jìn)行獲取） prefixBase64: ’data:image/png;base64,’, // base64前綴 } } ...</script>

2.采用這種方式可以很好的支持chrome、Firefox、opera、Safari，但是不支持ie，所以我們下面單獨(dú)處理ie瀏覽器

1.修改代碼如下

<template> <a @click.stop.prevent='handleDownloadQrIMg' > <img src='http://www.aoyou183.cn/bcjs/static/img/load.png'> </a></template><script>export default { methods: { // 點(diǎn)擊下載圖片 handleDownloadQrIMg() { // 這里是獲取到的圖片base64編碼,這里只是個(gè)例子哈，要自行編碼圖片替換這里才能測(cè)試看到效果 const imgUrl = this.prefixBase64 + this.qrBase64; // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候），那么調(diào)用該方法去下載圖片 if (window.navigator.msSaveOrOpenBlob) { let bstr = atob(imgUrl.split(',')[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let blob = new Blob([u8arr]); window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png'); } else { // 這里就按照chrome等新版瀏覽器來(lái)處理 let a = document.createElement('a'); a.href = imgUrl; a.setAttribute('download', 'chart-download'); a.click(); } } }};</script>

2.ok，ie的問(wèn)題解決了，但是火狐的又不行了

1.結(jié)合上面兩種檢測(cè)方法，我們只要可以判斷瀏覽器是火狐，然后單獨(dú)處理就可以實(shí)現(xiàn)我們的兼容性了

<template> <div> <a v-if='!isFirefox' @click.stop.prevent='handleDownloadQrIMg' > <img src='http://www.aoyou183.cn/bcjs/static/img/load.png'> </a> <a v-if='isFirefox' :href='http://www.aoyou183.cn/bcjs/prefixBase64 + qrBase64' rel='external nofollow' rel='external nofollow' download='qrcode.png' > <img src='http://www.aoyou183.cn/bcjs/static/img/load.png'> </a> </div> </template> <script>export default { data() { return { qrBase64: '', // 二維碼對(duì)應(yīng)的base64（在方法里面進(jìn)行獲取） prefixBase64: 'data:image/png;base64,', // base64前綴 isFirefox: false }; }, mounted() { // 判斷瀏覽器是否是火狐 if (navigator.userAgent.indexOf('Firefox') > 0) { this.isFirefox = true; } }, methods: { // 點(diǎn)擊下載圖片 handleDownloadQrIMg() { // 這里是獲取到的圖片base64編碼,這里只是個(gè)例子哈，要自行編碼圖片替換這里才能測(cè)試看到效果 const imgUrl = this.prefixBase64 + this.qrBase64; // 如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候），那么調(diào)用該方法去下載圖片 if (window.navigator.msSaveOrOpenBlob) { let bstr = atob(imgUrl.split(',')[1]); let n = bstr.length; let u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } let blob = new Blob([u8arr]); window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png'); } else { // 這里就按照chrome等新版瀏覽器來(lái)處理 let a = document.createElement('a'); a.href = imgUrl; a.setAttribute('download', 'chart-download'); a.click(); } } }};</script>

以上就是vue 通過(guò)base64實(shí)現(xiàn)圖片下載功能的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片下載的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！