Bagaimana untuk Menyimpan dan Memaparkan Imej Menggunakan LocalStorage?

Menyimpan dan Memaparkan Imej Menggunakan LocalStorage

Soalan:

Bagaimana saya boleh menyimpan imej yang dimuat naik ke localStorage, kemudian paparkan ia pada seterusnya halaman?

Jawapan:

Menyimpan Imej

1. Dapatkan elemen imej menggunakan getElementById('bannerImage' ).
2. Tukar imej kepada rentetan Base64 menggunakan getBase64Image() fungsi:

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  var dataURL = canvas.toDataURL("image/png");

  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

3. Simpan rentetan Base64 ke localStorage menggunakan localStorage.setItem("imgData", imgData).

Memaparkan Imej

1. Pada halaman seterusnya, buat elemen imej dengan atribut src kosong: .
2. Dapatkan rentetan Base64 daripada localStorage menggunakan localStorage.getItem('imgData').
3. Tetapkan atribut src imej kepada rentetan Base64: bannerImg.src = "data:image/png;base64," dataImage.

Atas ialah kandungan terperinci Bagaimana untuk Menyimpan dan Memaparkan Imej Menggunakan LocalStorage?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!