在 JavaScript 中从 Base64 字符串创建 BLOB [英] Creating a BLOB from a Base64 string in JavaScript

问题描述

我在字符串中有 Base64 编码的二进制数据:

I have Base64-encoded binary data in a string:

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

我想创建一个包含此数据的 blob: URL 并将其显示给用户:

I would like to create a blob: URL containing this data and display it to the user:

const blob = new Blob(????, {type: contentType});
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

我一直无法弄清楚如何创建 BLOB.

I haven't been been able to figure out how to create the BLOB.

在某些情况下，我可以通过使用 data: URL 来避免这种情况:

In some cases I am able to avoid this by using a data: URL instead:

const dataUrl = `data:${contentType};base64,${b64Data}`;

window.location = dataUrl;

但是，在大多数情况下，data: URL 非常大.

However, in most cases the data: URLs are prohibitively large.

如何在 JavaScript 中将 Base64 字符串解码为 BLOB 对象?

How can I decode a Base64 string to a BLOB object in JavaScript?

推荐答案

atob 函数会将 Base64 编码的字符串解码为一个新字符串，其中二进制数据的每个字节都有一个字符.

The atob function will decode a Base64-encoded string into a new string with a character for each byte of the binary data.

const byteCharacters = atob(b64Data);

每个字符的代码点 (charCode) 将是字节的值.我们可以通过使用 .charCodeAt 方法为字符串中的每个字符应用它来创建一个字节值数组.

Each character's code point (charCode) will be the value of the byte. We can create an array of byte values by applying this using the .charCodeAt method for each character in the string.

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

您可以将此字节值数组传递给Uint8Array 构造函数，从而将其转换为真正类型化的字节数组.

You can convert this array of byte values into a real typed byte array by passing it to the Uint8Array constructor.

const byteArray = new Uint8Array(byteNumbers);

这反过来又可以通过将其包装在数组中并将其传递给 Blob 构造函数来转换为 BLOB.

This in turn can be converted to a BLOB by wrapping it in an array and passing it to the Blob constructor.

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

上面的代码有效.然而，通过在较小的切片中处理 byteCharacters 而不是一次处理所有的部分，可以稍微提高性能.在我的粗略测试中，512 字节似乎是一个不错的切片大小.这为我们提供了以下功能.

The code above works. However the performance can be improved a little by processing the byteCharacters in smaller slices, rather than all at once. In my rough testing 512 bytes seems to be a good slice size. This gives us the following function.

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

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

window.location = blobUrl;

完整示例:

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

const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);

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

这篇关于在 JavaScript 中从 Base64 字符串创建 BLOB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！