Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
method中寫(xiě)兩個(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-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁(yè)面實(shí)例配置優(yōu)化方法,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化
本篇文章主要介紹了淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09
Vue實(shí)現(xiàn)面包屑導(dǎo)航的正確方式
面包屑導(dǎo)航(BreadcrumbNavigation)這個(gè)概念來(lái)自童話故事“漢賽爾和格萊特”,它的作用是告訴訪問(wèn)者他們?cè)诰W(wǎng)站中的位置以及如何返回,本文為大家介紹了實(shí)現(xiàn)面包屑導(dǎo)航的正確方式,需要的可以參考一下2023-06-06
一個(gè)Java程序猿眼中的前后端分離以及Vue.js入門(mén)(推薦)
這篇文章主要介紹了前后端分離及Vue.js入門(mén),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3基礎(chǔ)組件開(kāi)發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開(kāi)發(fā)-detePicker(日期選擇組件)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
vue2.0項(xiàng)目集成Cesium的實(shí)現(xiàn)方法
這篇文章主要介紹了vue2.0項(xiàng)目集成Cesium的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07

