☰

JavaScript で base64 文字列から Blob を作成する 質問する

tag-icon • tag-icon javascript base64
JavaScript で base64 文字列から Blob を作成する 質問する

文字列内に base64 でエンコードされたバイナリ データがあります。

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

blob:このデータを含む URL を作成し、ユーザーに表示したいと思います。

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

window.location = blobUrl;

を作成する方法がわかりませんBlob。

場合によっては、data:代わりに URL を使用することでこれを回避できます。

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

window.location = dataUrl;

ただし、ほとんどの場合、data:URL は大きすぎて許容できません。

BlobJavaScript でbase64 文字列をオブジェクトにデコードするにはどうすればよいですか?

ベストアンサー1

このatob関数は、base64 でエンコードされた文字列を、バイナリ データの各バイトの文字を含む新しい文字列にデコードします。

const byteCharacters = atob(b64Data);

.charCodeAt各文字のコード ポイント (charCode) がバイトの値になります。文字列内の各文字に対してメソッドを使用してこれを適用することで、バイト値の配列を作成できます。

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。

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

上記のコードは動作します。ただし、一度に処理するのではなく、小さなスライスで処理することで、パフォーマンスを少し向上させることができますbyteCharacters。私の大まかなテストでは、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;
}

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

おすすめ記事