JS中Base64、URL和Blob互转详解与代码示例

在前端开发中，展示图片通常涉及三种主要形式：URL、Base64编码字符串以及Blob对象。

首先，URL方式。通常情况下，直接使用图片的URL地址是推荐的做法。

let url = "http://xxxxxx"

其次，Base64编码。当图片体积较大或色彩层次丰富时，不建议使用此方式，因为Base64编码后的字符串体积庞大，会显著增加HTML页面大小，从而拖慢加载速度。然而，对于Loading动画或小图标等体积微小但频繁使用的图片，采用“Base64:URL”技术可以有效减少HTTP请求次数，是一种有效的优化手段。

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

最后，Blob对象。当后端返回特定的图片二进制流时，前端可以使用Blob容器接收这些二进制数据，并通过调用方法生成一个临时的Blob展示地址，从而在页面上显示图片。

URL 转 Base64

其核心原理是利用 canvas.toDataURL API将图片数据转换为 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) => {
  // 转化后的base64图片地址
  console.log("base64", res);
});

Blob 转 URL

实现原理是借助 URL.createObjectURL 方法为Blob对象创建一个临时的 URL。

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

Blob 转 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 转 Blob

其原理涉及将Base64字符串解码为 Uint8Array，进而构造 ArrayBuffer 对象。

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 转 Url

实现思路是先将Base64字符串转换为Blob对象，然后再将该Blob对象转换为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);

总结

至此，关于JavaScript实现Base64、URL和Blob之间相互转换的三种方式介绍完毕。如需了解更多相关内容，可查阅本站往期文章或继续浏览后续文章，感谢大家的支持！

JavaScript实现Base64、URL与Blob相互转换的三种方式

URL 转 Base64

Blob 转 URL

Blob 转 Base64

Base64 转 Blob

Base64 转 Url

总结

实用工具推荐