Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
method中寫兩個(gè)方法:
- 根據(jù)base64轉(zhuǎn)圖片的方法
- 根據(jù)轉(zhuǎn)換出blob格式的文件導(dǎo)出的方法
//base64轉(zhuǎn)png base64ImgtoFile(dataurl, filename = 'file') { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const suffix = mime.split('/')[1] const bstr = atob(arr[1]) let n = bstr.length const u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], `${filename}.${suffix}`, { type: mime }) }, //圖片下載 downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); }
傳入base64的圖片全路徑,在合適的位置分別調(diào)用這兩個(gè)方法,即可實(shí)現(xiàn)下載
var base64Img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABAFJREFU ..........................DlzUWu+L9NALAI4D+JOIkszc5PuWNABcBbAbwGGt9ewmAFLKJ5n5s5iXEhZCvBQEgQ3YEdd1p4UQR9PpdH11dXWRmV8motPJZPJgIpH4bWVl5dDw8PAR3/ftE2B9BuzX6Ojo/kajYZvp/i5vhAYRXbBPs3YTdcuYlPIuZj7tOM4r2+n+vx6nPdR/x1T/Aau20TA//wiSAAAAAElFTkSuQmCC'; var imgFile = this.base64ImgtoFile(base64Img); this.downloadBlob(imgFile, 'test.png')
附:圖片轉(zhuǎn)base64的方法
getBase64(file) { //把圖片轉(zhuǎn)成base64編碼 return new Promise(function (resolve, reject) { let reader = new FileReader(); let imgResult = ""; reader.readAsDataURL(file); reader.onload = function () { imgResult = reader.result; }; reader.onerror = function (error) { reject(error); }; reader.onloadend = function () { resolve(imgResult); }; }); },
總結(jié)
到此這篇關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的文章就介紹到這了,更多相關(guān)Vue Base64轉(zhuǎn)png、jpg內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決
今天小編就為大家分享一篇vue 返回上一頁(yè),頁(yè)面樣式錯(cuò)亂的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)省市區(qū)的級(jí)聯(lián)選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10Vue.js列表渲染綁定jQuery插件的正確姿勢(shì)
這篇文章主要為大家詳細(xì)介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢(shì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個(gè)api的實(shí)現(xiàn)原理基本一模一樣,那么Vue.set()和this.$set()的區(qū)別是什么,本文詳細(xì)的介紹一下,感興趣的可以了解一下2021-06-06VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例
本文主要介紹了VUE 文字轉(zhuǎn)語(yǔ)音播放的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02如何在 Vite 項(xiàng)目中自動(dòng)為每個(gè) Vue 文件導(dǎo)入 base.les
在Vite配置中通過(guò)添加css.preprocessorOptions實(shí)現(xiàn)自動(dòng)導(dǎo)入base.less,簡(jiǎn)化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序
這篇文章主要介紹了vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序克隆clone,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07