快捷導(dǎo)航

vue中的base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL方式

更新時間：2024年10月16日 11:02:25 作者：Juliet_xmj

在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉(zhuǎn)換為Blob URL,進而轉(zhuǎn)換為File對象,并可進一步轉(zhuǎn)換為PNG或其他格式的圖片,這種轉(zhuǎn)換技術(shù)在前端開發(fā)中非常實用

vue base64圖片轉(zhuǎn)網(wǎng)絡(luò)URL

src支持base64圖片，正常base64圖片可以直接復(fù)制到圖片src，也可以將其轉(zhuǎn)為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文件，再轉(zhuǎn)為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)絡(luò)路徑

base64轉(zhuǎn)url、url轉(zhuǎn)base64

   // url轉(zhuǎn)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轉(zhuǎn)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);