Bagaimana untuk Mencipta Blob daripada Rentetan Base64 dalam JavaScript?

Mencipta Blob daripada Rentetan Base64 dalam JavaScript

Masalahnya

Anda mempunyai data binari yang dikodkan base64 dalam rentetan dan ingin mencipta Blob URL yang mengandungi data ini dan paparkannya kepada pengguna. Secara khusus, matlamatnya ialah untuk mencipta objek Blob daripada rentetan base64, seperti yang dilihat dalam coretan kod di bawah:

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

Penyelesaian

Untuk menyahkod rentetan base64 kepada objek Blob dalam JavaScript, ikut langkah berikut:

1. Nyahkod base64 data: Gunakan fungsi atob untuk menyahkod rentetan base64 kepada rentetan aksara:

   const byteCharacters = atob(b64Data);

   Salin selepas log masuk

2. Tukar aksara bait kepada nilai bait: Cipta tatasusunan daripada nilai bait dengan mendapatkan titik kod aksara (charCode) untuk setiap aksara dalam rentetan:

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

   Salin selepas log masuk

3. Buat tatasusunan bait ditaip: Tukar nilai bait kepada tatasusunan bait ditaip sebenar menggunakan pembina Uint8Array:

   const byteArray = new Uint8Array(byteNumbers);

   Salin selepas log masuk

4. Balut dalam tatasusunan dan buat Blob: Cipta objek Blob dengan membungkus tatasusunan bait dalam tatasusunan dan hantarkannya kepada pembina Blob:

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

   Salin selepas log masuk

Pengoptimuman Prestasi

Kod di atas berfungsi sepenuhnya, tetapi prestasi boleh dipertingkatkan dengan menghiris aksara bait kepada bahagian yang lebih kecil sebelum pemprosesan.

Contoh Penuh

Berikut ialah contoh penuh, mencipta elemen imej daripada 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;
};

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

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