vue中的base64圖片轉網(wǎng)絡URL方式
更新時間：2024年10月16日 11:02:25 作者：Juliet_xmj
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉換為Blob URL,進而轉換為File對象,并可進一步轉換為PNG或其他格式的圖片,這種轉換技術在前端開發(fā)中非常實用
vue base64圖片轉網(wǎng)絡URL
src支持base64圖片，正常base64圖片可以直接復制到圖片src，也可以將其轉為URL
// data
url: 'XXXXXXXX' // base64編碼
imgUrl: '' // 圖片路徑
// methods
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
})
},打印得到File文件，再轉為png圖片
const img = 'data:image/png;base64,' + img this.file = this.base64ImgtoFile(img) // 得到File對象 this.imgUrl = window.webkitURL.createObjectURL(file) || window.URL.createObjectURL(file) // imgUrl圖片網(wǎng)絡路徑
base64轉url、url轉base64
// url轉base64
dataURLtoBlob(dataurl) {
return new Promise((resolve, reject) => {
let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
resolve(new Blob([u8arr], {type:mime}));
})
},
const images = await Promise.all([
this.dataURLtoBlob(this.imageUrl),
this.dataURLtoBlob(this.imageUrl2),
])
// base64轉url
dataURLtoBlobURL(dataUrl) {
return new Promise((resolve, reject) => {
let arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new Blob([u8arr], {type:mime});
let url = URL.createObjectURL(blob);
resolve(url);
});
},
let url1 = await this.dataURLtoBlobURL(this.imageUrl);
let url2 = await this.dataURLtoBlobURL(this.imageUrl2);
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue使用wavesurfer.js實現(xiàn)音頻可視化的示例詳解
WaveSurfer.js是一個開源的音頻可視化庫,用于創(chuàng)建交互式、可定制的波形,本文將為大家簡單介紹了Vue如何使用wavesurfer.js實現(xiàn)音頻可視化功能,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
這篇文章主要介紹了Vue 實現(xiàn)樹形視圖數(shù)據(jù)功能,利用簡單的樹形視圖實現(xiàn)的，在實現(xiàn)過程中熟悉了組件的遞歸使用，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要介紹了vue+php實現(xiàn)的微博留言功能,結合完整實例形式分析了vue.js前臺留言及后臺php交互功能相關操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了ant?design?vue的table取消自帶分頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
el-select 下拉框多選實現(xiàn)全選的實現(xiàn)
這篇文章主要介紹了el-select 下拉框多選實現(xiàn)全選的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了vue2中引用better-scroll和使用 better-scroll的方法，使用時有三個要點及注意事項在文中給大家詳細介紹 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了如何使用Vue和高德API搭建一個前端頁面,實現(xiàn)了地圖的加載和衛(wèi)星圖層、路網(wǎng)圖層的管理,文中通過圖文及代碼介紹的非常詳細,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了利用report分析vue項目中各文件大小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要給大家介紹了關于Vue的組件中data選項為什么必須是函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要為大家詳細介紹了vue使用拖拽方式創(chuàng)建結構樹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10