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

更新時間：2025年04月01日 11:43:09 作者：北覓_小太陽

在JavaScript中將圖片的絕對路徑轉(zhuǎn)換為base64字符串或blob對象,是常見的圖片上傳前的預(yù)處理步驟,這篇文章主要介紹了js實現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的3種方式,需要的朋友可以參考下

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

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

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

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;
 
      // 將圖片插入畫布并開始繪制
      canvas.getContext("2d").drawImage(image, 0, 0);
 
      // result
      let result = canvas.toDataURL("image/png");
 
      resolve(result);
    };
 
    // CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
 
    image.setAttribute("crossOrigin", "Anonymous");
    image.src = url;
 
    // 圖片加載失敗的錯誤處理
    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對象創(chuàng)建臨時的URL

var url = URL.createObjectURL(blob);
//或者
let binaryData = [];
binaryData.push(blob);
let url = URL.createObjectURL(new Blob(binaryData));

blob 轉(zhuǎn) base64

export function 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 =&gt; {
	// 輸出圖片base64
	console.log(res)
}).catch(err =&gt; {
	console.log(err)
})

base64 轉(zhuǎn) Blob

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

export function base64ToBlob (base64) {
	let bstr = window.atob(base64),
		n = bstr.length,
		u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n)
	}
	return new Blob([u8arr], { type: base64})
}
 
//或者
 
//需要你手動去掉data:image/png;base64,
function base64ToBlob (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;
}

使用：

let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
 
base64ToBlob(base64Str)
 
//或者
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA";
let ba64 = base64Str.split(',')[1];
base64ToBlob(ba64);

base64 轉(zhuǎn) Url

原理：先將base64轉(zhuǎn)成Blob，再將Blob轉(zhuǎn)成Url

function base64ToUrl(base) {
  //需要手動去掉data:image/png;base64,
  //base64-->blob
  const byteCharacters = atob(base);
  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" });
  //blob-->url
  let binaryData = [];
  binaryData.push(blob);
  let url = URL.createObjectURL(new Blob(binaryData));
  return url;
}

使用：

let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA";
let ba64 = base64Str.split(",")[1];
base64ToUrl(ba64);

總結(jié)

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

您可能感興趣的文章: