如何在 JavaScript 中将 Base64 字符串转换为 Blob？

在 JavaScript 中从 Base64 字符串创建 Blob

使用编码为 Base64 字符串的二进制数据时，可能需要进行转换将其转换为 Blob 对象。这对于在网络浏览器中显示数据或将其保存到用户的设备非常有用。

解码 Base64 字符串

第一步是解码 Base64 string 转换为字节字符的字符串。这可以使用 atob 函数来实现。

const byteCharacters = atob(b64Data);

将字节字符转换为字节数组

接下来，我们需要将字节字符转换为真实类型的字节数组。这可以通过将字节字符传递给 Uint8Array 构造函数来完成。

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

const byteArray = new Uint8Array(byteNumbers);

创建 Blob 对象

最后，我们可以包装数组中的字节数组并将其传递给 Blob 构造函数以创建 Blob object.

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

性能优化

上面的代码可以工作，但是可以通过处理较小切片中的字节字符来提高其性能。 512 字节的切片大小通常是一个不错的选择。

示例函数

下面是一个使用优化方法将 Base64 字符串转换为 Blob 对象的函数：

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;
};

用法示例

要使用该函数，只需传递 base64 字符串和内容类型作为参数即可。

const blob = b64toBlob(b64Data, contentType);

生成的 Blob 对象可用于创建图像或下载数据。

以上是如何在 JavaScript 中将 Base64 字符串转换为 Blob？的详细内容。更多信息请关注PHP中文网其他相关文章！