Bagaimanakah Saya Boleh Menyimpan Imej ke LocalStorage dan Memaparkannya pada Halaman Seterusnya?

Menyimpan Imej ke localStorage dan Memaparkannya pada Halaman Seterusnya

Keperluan anda ialah memuat naik imej, menyimpannya dalam localStorage dan kemudian paparkan pada halaman berikutnya. Berikut ialah penyelesaian untuk menangani keperluan ini:

Menyimpan Imej

Setelah anda memaparkan imej pada halaman menggunakan fungsi HTML dan JavaScript yang anda nyatakan, ikuti tambahan ini langkah apabila butang 'Simpan' diklik:

1. Dapatkan semula elemen HTML untuk imej sepanduk menggunakan document.getElementById('bannerImg').
2. Tukar imej kepada rentetan Base64 menggunakan fungsi getBase64Image yang disediakan di bawah.
3. Simpan rentetan Base64 sebagai item localStorage dengan localStorage.setItem("imgData ", imgData).

Fungsi untuk Menukar Imej kepada Rentetan Base64:

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,/, "");
}

Memaparkan Imej pada Halaman Seterusnya

Pada halaman berikutnya, buat imej dengan src kosong atribut:

<img src="">

Kemudian, laksanakan baris berikut setelah halaman dimuatkan:

1. Dapatkan rentetan Base64 daripada localStorage menggunakan var dataImage = localStorage.getItem('imgData').
2. Dapatkan elemen HTML untuk imej sepanduk jadual dengan bannerImg = document.getElementById('tableBanner').

3. Tetapkan atribut src imej kepada rentetan Base64:

   bannerImg.src = "data:image/png;base64," + dataImage;

Pendekatan ini membolehkan anda menyimpan imej dalam localStorage dan paparkannya pada halaman seterusnya tanpa sebarang isu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyimpan Imej ke LocalStorage dan Memaparkannya pada Halaman Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!