Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menukar Rentetan Base64 kepada Blob dalam JavaScript?

Bagaimana untuk Menukar Rentetan Base64 kepada Blob dalam JavaScript?

Linda Hamilton
Linda Hamiltonasal
2024-12-24 16:09:15776semak imbas

How to Convert a Base64 String to a Blob in JavaScript?

Mencipta Blob daripada Rentetan Base64 dalam JavaScript

Apabila bekerja dengan data binari yang dikodkan sebagai rentetan base64, mungkin perlu menukar ia menjadi objek Blob. Ini boleh berguna untuk memaparkan data dalam penyemak imbas web atau menyimpannya ke peranti pengguna.

Menyahkod Rentetan Base64

Langkah pertama ialah menyahkod base64 rentetan menjadi rentetan aksara bait. Ini boleh dicapai menggunakan fungsi atob.

const byteCharacters = atob(b64Data);

Menukar Aksara Byte kepada Array Byte

Seterusnya, kita perlu menukar aksara bait ke dalam tatasusunan bait ditaip sebenar. Ini boleh dilakukan dengan menghantar aksara bait kepada pembina 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);

Mencipta Objek Gumpalan

Akhir sekali, kita boleh membalut tatasusunan bait dalam tatasusunan dan hantarkannya kepada pembina Blob ke cipta objek Blob.

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

Pengoptimuman Prestasi

Kod di atas berfungsi, tetapi prestasinya boleh dipertingkatkan dengan memproses aksara bait dalam kepingan yang lebih kecil. Saiz kepingan 512 bait biasanya merupakan pilihan yang baik.

Fungsi Contoh

Berikut ialah fungsi yang menukar rentetan base64 kepada objek Blob menggunakan pendekatan yang dioptimumkan:

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

Penggunaan Contoh

Untuk menggunakan fungsi, hanya hantar rentetan base64 dan jenis kandungan sebagai argumen.

const blob = b64toBlob(b64Data, contentType);

Objek Blob yang terhasil kemudiannya boleh digunakan untuk mencipta imej atau memuat turun data.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Rentetan Base64 kepada Blob dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn