Bagaimanakah Saya Boleh Menyahkod Data Base64 dengan Cekap menjadi Blob dalam JavaScript?

Menyahkod Data Base64 ke dalam Gumpalan: Panduan Komprehensif untuk Pembangun JavaScript

Dalam JavaScript, bekerja dengan data binari berkod base64 ialah tugas biasa. Untuk memaparkan data ini kepada pengguna, selalunya perlu membuat objek Blob. Artikel ini menyediakan panduan menyeluruh tentang cara untuk menyahkod data base64 menjadi Blob, menangani cabaran khusus untuk mengendalikan URL data yang terlalu besar.

Menukar Base64 kepada Tatasusunan Byte

Untuk menyahkod rentetan base64 ke dalam data binari, kita boleh memanfaatkan fungsi atob. Ia mengembalikan rentetan baharu dengan satu aksara untuk setiap bait dalam data yang dikodkan.

Untuk menukar aksara ini kepada nilai bait yang sepadan, kami mengulangi setiap aksara menggunakan kaedah charCodeAt, menghasilkan tatasusunan nombor bait.

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

Mencipta Tatasusunan Byte Ditaip

Kita boleh menggunakan Pembina Uint8Array untuk menukar tatasusunan nombor bait kepada tatasusunan bait bertaip, iaitu objek seperti tatasusunan yang mewakili data perduaan asas.

const byteArray = new Uint8Array(byteNumbers);

Menukar kepada Gumpalan

Akhir sekali, kita boleh balut tatasusunan bait yang ditaip dalam tatasusunan dan hantarkannya kepada pembina Blob untuk mencipta Blob objek.

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

Mengoptimumkan Prestasi

Sementara kod di atas berfungsi, prestasinya boleh dipertingkatkan dengan memproses aksara bait dalam kepingan yang lebih kecil dan bukannya sekaligus.

Fungsi b64toBlob di bawah menunjukkan peningkatan ini, dengan saiz kepingan 512 bait, yang didapati dapat memberikan keseimbangan yang baik antara penggunaan memori dan prestasi.

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

Contoh Penuh

Untuk menunjukkan penggunaan b64toBlob, kita boleh mencipta elemen imej dan menetapkan sumbernya kepada URL Blob yang dicipta daripada imej berkod base64.

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

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

Dengan mengikuti langkah-langkah ini dan menggunakan coretan kod yang disediakan, anda boleh menyahkod data base64 dengan berkesan ke dalam Blob objek dalam JavaScript, membolehkan anda memaparkan data binari yang besar kepada pengguna tanpa menghadapi batasan URL data.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyahkod Data Base64 dengan Cekap menjadi Blob dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!