Bagaimanakah Saya Boleh Menyimpan dan Memaparkan Imej Menggunakan LocalStorage Merentas Muatan Halaman?

Menyimpan dan Memaparkan Imej Menggunakan LocalStorage Merentas Pemuatan Halaman

Masalah:

Pengguna boleh memuat naik imej, isikan input borang, simpan borang ke localStorage, dan teruskan ke halaman baharu. Matlamatnya adalah untuk turut menyimpan imej yang dimuat naik ke localStorage dan memaparkannya pada halaman seterusnya.

Penyelesaian:

1. Merebut Imej:

   • Gunakan getElementById untuk mendapatkan semula elemen HTML mengandungi imej.

2. Menukar kepada Base64:

   • Tentukan fungsi untuk menukar imej kepada perwakilan rentetan Base64 menggunakan kanvas dan toDataURL.

3. Menyimpan ke localStorage:

   • Simpan rentetan Base64 sebagai nilai dalam localStorage menggunakan setItem dengan unik kunci.

4. Pada Halaman Seterusnya:

   • Buat elemen imej dengan atribut src kosong.
   • Dapatkan semula rentetan Base64 daripada localStorage menggunakan getItem.
   • Kemas kini atribut src imej untuk memasukkan rentetan Base64.

5. Contoh Kod:

   • Menyimpan ke localStorage:

     const imgData = getBase64Image(document.getElementById('bannerImg'));
     localStorage.setItem('imgData', imgData);

     Salin selepas log masuk

   • Dipaparkan pada halaman seterusnya:

     const dataImage = localStorage.getItem('imgData');
     const bannerImg = document.getElementById('tableBanner');
     bannerImg.src = "data:image/png;base64," + dataImage;

     Salin selepas log masuk

Penyelesaian ini membolehkan anda menyimpan imej yang dimuat naik ke localStorage sebagai rentetan Base64 dan memaparkannya pada halaman lain dengan mendapatkan semula rentetan dan menetapkannya sebagai atribut src imej.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan dan Memaparkan Imej Menggunakan LocalStorage Merentas Muatan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!