js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式

更新時(shí)間：2023年04月13日 10:26:28 作者：冬天不會(huì)冷lz

Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象,Blob表示的不一定是JavaScript原生格式的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式,需要的朋友可以參考下

2.base64：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因?yàn)槠銪ase64編碼后的字符串非常大，會(huì)明顯增大HTML頁(yè)面，影響加載速度。如果圖片像loading或者小圖標(biāo)，小圖片這樣的，大小極小，但又占據(jù)了一次HTTP請(qǐng)求，而很多地方都會(huì)使用。則非常適用“base64:URL圖片”技術(shù)進(jìn)行優(yōu)化了！

let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"

3.blob: 當(dāng)后端返回特定的圖片二進(jìn)制流的時(shí)候，前端用blob容器接收二進(jìn)制流，再通過(guò) URL.createObjectURL(blob)生成一個(gè)臨時(shí)blob展示地址

關(guān)系圖

url 轉(zhuǎn) base64

原理：利用canvas.toDataURL的API轉(zhuǎn)化成base64

function urlToBase64(url) {
      return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
          let canvas = document.createElement('canvas');
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 將圖片插入畫(huà)布并開(kāi)始繪制
          canvas.getContext('2d').drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL('image/png')
          resolve(result);
        };
        // CORS 策略，會(huì)存在跨域問(wèn)題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 圖片加載失敗的錯(cuò)誤處理
        image.onerror = () => {
          reject(new Error('urlToBase64 error'));
      };
    }

使用

let imgUrL = `http://XXX.jpg`
urlToBase64(imgUrL).then(res => {
  // 轉(zhuǎn)化后的base64圖片地址
  console.log('base64', res)
})

blob 轉(zhuǎn) url

原理：利用URL.createObjectURL為blob對(duì)象創(chuàng)建臨時(shí)的URL

var url = URL.createObjectURL(blob)

blob 轉(zhuǎn) base64

原理：利用fileReader的readAsDataURL，將blob轉(zhuǎn)為base64

blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

使用

blobToBase64(blob).then(res => {
  // 轉(zhuǎn)化后的base64
  console.log('base64', res)
})

base64 轉(zhuǎn) Blob

原理： Uint8Array，ArrayBuffer構(gòu)造

function base64toBlob(dataurl) {
    var 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);
    }
    return new Blob([u8arr], { type: mime });
}

或者

function baseToBlob (b64) {
      const byteCharacters = atob(b64)
      const byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)
      const blob = new Blob([byteArray], { type: 'image/jpeg' })
      return blob
    }
//需要你手動(dòng)去掉data:image/png;base64,

使用：

let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
dataURLtoBlob(base64Str)

或者，利用fetch（推薦）

fetch(`data:${type};base64,${base64}`).then(res => res.blob())

字符串和 base64 之間互轉(zhuǎn)

原理：atob 和 btoa

let str = btoa("Dsgsg1234567890-=[];'m,,./")
console.log(str)  //RHNnc2cxMjM0NTY3ODkwLT1bXTsnbSwsLi8=
console.log(atob(str))  //Dsgsg1234567890-=[];'m,,./

而且大部分瀏覽器都支持除了 IE9-btoa 方法不支持中文和特殊字符，否則會(huì)報(bào)錯(cuò)

所以保險(xiǎn)起見(jiàn),在轉(zhuǎn)換之前還是 encodeURIComponent/encodeURI一下吧, 當(dāng)然別忘了在 atob 后,再 decodeURIComponent/decodeURI回來(lái)。

總結(jié)

到此這篇關(guān)于js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式的文章就介紹到這了,更多相關(guān)js base64 url blob相互轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: