JavaScript Blob 转换为 Base64|极客笔记

JavaScript Blob 转换为 Base64

介绍

在 JavaScript 中，Blob（二进制大对象）是一种表示包含二进制数据的原始数据的对象。Blob 对象常用于处理文件上传、文件下载和图像处理等场景。而将 Blob 对象转换为 Base64 编码，则常用于数据传递、数据存储和数据展示等需要文本格式的场景。

本文将详细介绍如何使用 JavaScript 将 Blob 对象转换为 Base64 编码。我们将探讨从 Blob 获取数据、使用 FileReader 读取数据，并使用 Base64 编码将数据转换为字符串。

步骤

创建一个新的 Blob 对象。
使用 FileReader 读取 Blob 中的数据。
将数据转换为 Base64 编码。

创建示例

以下示例将展示如何将一张图片（blob）转换为 Base64 编码。首先，我们需要在 HTML 中添加一个用于选择文件的文件输入框，并在 JavaScript 中获取它的值。然后，我们使用 FileReader 实例将 blob 转换为 Base64 编码的字符串。

<!DOCTYPE html>
<html>

<body>
  <input type="file" id="fileInput" />
  <br>
  <img id="imagePreview" src="" alt="Preview" style="max-width: 300px; max-height: 300px;" />

  <script>
    const fileInput = document.getElementById('fileInput');
    const imagePreview = document.getElementById('imagePreview');

    fileInput.addEventListener('change', function() {
      const file = fileInput.files[0];
      const reader = new FileReader();

      reader.addEventListener('load', function() {
        imagePreview.src = reader.result;
      });

      if (file) {
        reader.readAsDataURL(file);
      }
    });
  </script>
</body>

</html>

在上面的示例中，我们创建了一个文件输入框，用户可以选择一张图片。然后我们使用 addEventListener 方法为文件输入框的 change 事件添加了一个监听器。当用户选择了一张图片后，监听器中的回调函数将会执行。

在回调函数中，我们首先获取用户选择的文件对象（即 Blob）。然后创建一个新的 FileReader 实例，并为其添加 load 事件的监听器。在 load 事件中，回调函数将会执行，我们将获取到的 Base64 编码的图片结果赋值给 <img> 标签的 src 属性，从而在页面上显示图片。

上述示例具有图形化界面，用户可以选择图片并预览。将文件以 Blob 格式转换为 Base64 编码并显示在页面上。

手动转换

如果您想手动将 Blob 对象转换为 Base64 编码，可以按照以下步骤进行：

从 Blob 对象获取数据。
使用 FileReader 读取数据。
将读取的数据转换为 Base64 编码。

以下是转换 Blob 为 Base64 编码的代码示例：

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onloadend = () => {
      resolve(reader.result);
    };

    reader.onerror = reject;

    reader.readAsDataURL(blob);
  });
}

// 示例用法
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

blobToBase64(blob)
  .then((base64String) => {
    console.log(base64String);
  })
  .catch((error) => {
    console.error(error);
  });

在上面的示例中，我们定义了一个 blobToBase64 函数，该函数接受一个 Blob 对象作为参数，并返回一个 Promise 对象。在该函数内部，我们创建一个 FileReader 实例，并为其添加 onloadend 和 onerror 事件的监听器。在 onloadend 事件中，我们通过调用 resolve 将读取结果（base64 编码的字符串）传递给 Promise。在 onerror 事件中，我们将错误传递给 Promise 中的 reject。

然后，我们可以通过创建一个 Blob 对象，将其传递给 blobToBase64 函数，并通过 .then 方法监听 Promise 的解析结果。通过这种方式，我们可以访问 base64 编码的结果。