如何在 JavaScript 中高效地将 Base64 数据解码为 Blob？

将 Base64 数据解码为 Blob：JavaScript 开发人员综合指南

在 JavaScript 中，处理 Base64 编码的二进制数据是一项常见任务。为了向用户显示此数据，通常需要创建 Blob 对象。本文提供了有关如何将 Base64 数据解码为 Blob 的全面指南，解决了处理过大数据 URL 的具体挑战。

将 Base64 转换为字节数组

解码 Base64 字符串转换为二进制数据，我们可以利用 atob 函数。它返回一个新字符串，编码数据中的每个字节都有一个字符。

为了将这些字符转换为其相应的字节值，我们使用 charCodeAt 方法迭代每个字符，从而生成一个字节数数组。

const byteCharacters = atob(b64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}

创建类型化字节数组

我们可以使用 Uint8Array 构造函数将字节数字数组转换为类型化字节数组，它是表示底层二进制数据的类似数组的对象。

const byteArray = new Uint8Array(byteNumbers);

转换为 Blob

最后，我们可以将类型化字节数组包装在数组中并传递传给 Blob 构造函数来创建 Blob 对象。

const blob = new Blob([byteArray], { type: contentType });

优化性能

虽然上面的代码有效，但通过处理较小切片中的字节字符而不是一次处理所有字节字符可以提高其性能。

下面的 b64toBlob 函数通过切片大小演示了这种改进512 字节，已发现它可以在内存使用和性能之间提供良好的平衡。

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  const blob = new Blob(byteArrays, { type: contentType });
  return blob;
};

完整示例

为了演示 b64toBlob 的用法，我们可以创建一个图像元素并将其源设置为从 Base64 编码图像创建的 Blob URL。

const blob = b64toBlob(b64Data, 'image/png');
const blobUrl = URL.createObjectURL(blob);

const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);

通过执行以下步骤和利用提供的代码片段，您可以有效地将base64数据解码为JavaScript中的Blob对象，从而使您能够向用户显示大型二进制数据，而不会遇到数据的限制网址。

以上是如何在 JavaScript 中高效地将 Base64 数据解码为 Blob？的详细内容。更多信息请关注PHP中文网其他相关文章！