base64编码的图片数据在前端解析显示共4步：1.使用atob()解码base64字符串为二进制字符串，注意用try...catch处理异常；2.将二进制字符串转换为arraybuffer再转为uint8array以便访问字节；3.利用arraybuffer创建blob对象并指定mime类型，如image/jpeg；4.通过url.createobjecturl生成临时url赋值给img标签src属性完成显示。同时可从base64头部提取mime类型，或手动指定。arraybuffer和uint8array提供高效方式处理二进制数据，避免重复解码可提升性能，大文件建议用web workers解码。
Base64编码的图片数据，在前端JS中解析并显示，其实没那么神秘。核心就是将Base64字符串解码成二进制数据，然后利用这些数据创建一个URL，最后把这个URL设置给src属性。
4步完成Base64数据转图片显示
-
解码Base64字符串： 使用
atob()函数将Base64字符串解码成二进制字符串。这个函数是JavaScript内置的，非常方便。
function base64ToBinary(base64String) { return atob(base64String); }需要注意的是，
atob()函数可能会抛出异常，比如当Base64字符串格式不正确时。所以，最好用try...catch包裹一下。 -
创建ArrayBuffer和Uint8Array： 将二进制字符串转换为
ArrayBuffer，然后再转换为Uint8Array。ArrayBuffer代表原始的二进制数据缓冲区，Uint8Array则提供了对这些数据的更方便的访问方式。function binaryToArrayBuffer(binary) { const length = binary.length; const buffer = new ArrayBuffer(length); const view = new Uint8Array(buffer); for (let i = 0; i < length; i++) { view[i] = binary.charCodeAt(i); } return buffer; }这里，我们遍历二进制字符串，将每个字符的Unicode编码转换为
Uint8Array中的一个字节。 -
创建Blob对象： 使用
ArrayBuffer创建一个Blob对象。Blob对象代表一个不可变的、原始数据的类文件对象。我们需要指定Blob的MIME类型，这通常包含在Base64字符串的头部信息中。function arrayBufferToBlob(buffer, mimeType) { return new Blob([buffer], { type: mimeType }); }MIME类型很重要，它告诉浏览器如何处理这些数据。常见的图片MIME类型有
image/jpeg、image/png等。 -
创建URL并显示图片： 使用
URL.createObjectURL()方法为Blob对象创建一个URL，然后将这个URL赋值给src属性。function displayImage(blob) { const imageUrl = URL.createObjectURL(blob); const img = document.createElement('img'); img.src = imageUrl; document.body.appendChild(img); // 或者添加到你想要的元素中 }URL.createObjectURL()创建的URL是临时的，它只在当前文档有效。当页面卸载或者你不再需要这个URL时，应该调用URL.revokeObjectURL()来释放资源。
如何从Base64字符串中提取MIME类型？
Base64字符串通常以data:[mime type];base64,开头。我们可以使用正则表达式来提取MIME类型。
function getMimeTypeFromBase64(base64String) {
const match = base64String.match(/^data:(.*?);base64,/);
if (match && match[1]) {
return match[1];
}
return null;
}提取到MIME类型后，就可以将其传递给arrayBufferToBlob函数了。如果Base64字符串没有包含MIME类型信息，你可能需要根据实际情况手动指定。
为什么需要ArrayBuffer和Uint8Array？
直接操作二进制数据是很麻烦的，ArrayBuffer和Uint8Array提供了一种更方便、更高效的方式来处理二进制数据。ArrayBuffer代表一块连续的内存区域，而Uint8Array则允许我们以字节为单位访问这块内存。这对于处理图像、音频等二进制数据非常有用。没有它们，你可能需要使用更底层、更复杂的API来操作二进制数据。
性能优化：避免重复解码Base64字符串
如果需要多次使用同一个Base64字符串，避免重复解码。解码操作是比较耗时的，可以把解码后的ArrayBuffer或者Blob对象缓存起来，下次直接使用。另外，如果Base64字符串非常大，考虑使用Web Workers在后台线程中进行解码，避免阻塞主线程。
