Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
method中寫兩個方法:
- 根據(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)用這兩個方法,即可實(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)省市區(qū)的級聯(lián)選擇
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)省市區(qū)的級聯(lián)選擇,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實(shí)現(xiàn)原理基本一模一樣,那么Vue.set()和this.$set()的區(qū)別是什么,本文詳細(xì)的介紹一下,感興趣的可以了解一下2021-06-06
VUE 文字轉(zhuǎn)語音播放的實(shí)現(xiàn)示例
本文主要介紹了VUE 文字轉(zhuǎn)語音播放的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02
如何在 Vite 項(xiàng)目中自動為每個 Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實(shí)現(xiàn)自動導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序
這篇文章主要介紹了vue拖拽組件 vuedraggable API options實(shí)現(xiàn)盒子之間相互拖拽排序克隆clone,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07

