Bagaimanakah Saya Boleh Menyimpan dan Mendapatkan Imej dalam LocalStorage untuk Paparan Web?

Menyimpan dan Mendapatkan Imej dalam localStorage untuk Paparan Web

Masalah:

Bagaimana anda boleh muat naik imej, simpan dalam localStorage, dan paparkan pada gambar berikutnya halaman?

Penyelesaian:

Menyimpan Imej ke localStorage:

1. Dapatkan imej yang dimuat naik dengan getElementById(' bannerImg').

2. Tukar imej kepada a Rentetan Base64 menggunakan fungsi getBase64Image():

   var imgData = getBase64Image(bannerImage);

3. Simpan rentetan Base64 sebagai nilai localStorage:

   localStorage.setItem("imgData", imgData);

Mengambil semula Imej daripada localStorage dan Memaparkan pada Seterusnya Halaman:

1. Pada halaman baharu, cipta elemen imej dengan src kosong:

   <img src="">

2. Pada pemuatan halaman, dapatkan semula rentetan Base64 daripada localStorage:

   var dataImage = localStorage.getItem('imgData');

3. Gunakan rentetan Base64 pada atribut src imej:

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

Pertimbangan Tambahan:

• Fungsi getBase64Image(). menukar imej kepada format PNG secara lalai. Anda boleh menentukan format lain jika perlu.
• Penyelesaian ini serasi dengan kebanyakan penyemak imbas utama. Walau bagaimanapun, sesetengah penyemak imbas lama mungkin tidak menyokong localStorage.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan dan Mendapatkan Imej dalam LocalStorage untuk Paparan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!