JS怎样解析Base64图片 4步完成Base64数据转图片显示-js教程-PHP中文网

JS怎样解析Base64图片 4步完成Base64数据转图片显示

冰火之心

发布： 2025-06-29 10:47:01

原创

842人浏览过

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解码。

JS怎样解析Base64图片 4步完成Base64数据转图片显示

Base64编码的图片数据，在前端JS中解析并显示，其实没那么神秘。核心就是将Base64字符串解码成二进制数据，然后利用这些数据创建一个URL，最后把这个URL设置给<img>标签的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字符串的头部信息中。

改图鸭AI图片生成
改图鸭AI图片生成

30

查看详情
```
function arrayBufferToBlob(buffer, mimeType) {
  return new Blob([buffer], { type: mimeType });
}
```
登录后复制
MIME类型很重要，它告诉浏览器如何处理这些数据。常见的图片MIME类型有image/jpeg、image/png等。
创建URL并显示图片： 使用URL.createObjectURL()方法为Blob对象创建一个URL，然后将这个URL赋值给<img>标签的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来操作二进制数据。