Bagaimana untuk memadam javascript imej tempatan

Apabila menggunakan imej tempatan dalam tapak web atau aplikasi, kadangkala kami perlu mengalih keluar imej tertentu. Dalam JavaScript, terdapat beberapa cara untuk memadam imej tempatan. Artikel ini akan memperincikan cara memadam imej tempatan menggunakan JavaScript.

Kaedah 1: Gunakan URL.revokeObjectURL()

Dalam JavaScript, gunakan URL.createObjectURL() untuk mencipta objek URL untuk memuatkan imej setempat. Memandangkan objek URL pada asasnya dicipta untuk memaparkan imej dalam halaman, anda boleh menggunakan kaedah URL.revokeObjectURL() untuk memadamkan imej apabila ia tidak lagi diperlukan untuk dipaparkan.

Berikut ialah contoh kod untuk memuatkan imej setempat menggunakan URL.createObjectURL():

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    const blobUrl = URL.createObjectURL(file);
    imgPreview.src = blobUrl;
  }
});

Dalam kod di atas, apabila pengguna memilih fail dan memuat naiknya, kami menyimpan URL fail di tengah pembolehubah blobUrl. Kami kemudian menetapkan blobUrl sebagai sumber imej ke dalam elemen imgPreview.

Jika anda ingin memadamkan imej yang dimuatkan, hanya panggil kaedah URL.revokeObjectURL():

URL.revokeObjectURL(blobUrl);
imgPreview.src = '';

Dalam coretan kod di atas, kami mula-mula memanggil kaedah URL.revokeObjectURL() , lulus ia bersama-sama dengan pembolehubah blobUrl yang disimpan sebelum ini. Ini segera memadamkan objek URL yang telah dibuat. Kami kemudian menetapkan atribut src elemen imgPreview kepada rentetan kosong untuk mengosongkan imej.

Kaedah 2: Gunakan gabungan URL.createObjectURL() dan URL.revokeObjectURL()

Kaedah yang sedikit berbeza boleh digunakan untuk mengalih keluar imej sepenuhnya daripada tapak web. Kami menerangkan perkara ini secara terperinci dalam coretan kod di bawah:

const fileInput = document.getElementById("file-input");
const imgPreview = document.getElementById("img-preview");
let blobUrl;

fileInput.addEventListener("change", function () {
  const file = fileInput.files[0];
  if (file) {
    blobUrl = URL.createObjectURL(file);
    if (imgPreview.src) {
      URL.revokeObjectURL(imgPreview.src);
    }
    imgPreview.src = blobUrl;
  }
});

Dalam kod di atas, kami menggunakan kaedah yang sama seperti sebelum ini untuk menyimpan URL fail dalam pembolehubah blobUrl dan menetapkannya sebagai sumber imej kepada imgPreview elemen tengah. Walau bagaimanapun, kami menambah satu lagi langkah tambahan.

Sebelum kami menambah sumber imej baharu pada elemen imgPreview, kami menyemak sama ada sumber imej sudah wujud dalam elemen imgPreview. Jika sudah ada sumber imej dalam elemen imgPreview, anda perlu memanggil kaedah URL.revokeObjectURL() untuk mengalih keluarnya dahulu, kerana penyemak imbas tidak akan mengosongkan URL sebelumnya secara automatik sebelum mentakrifkan semula atribut src.

Dalam kaedah gabungan ini, kami boleh mengemas kini imej dengan hanya mengubah suai nilai blobUrl pembolehubah seperti yang ditunjukkan di bawah:

blobUrl = URL.createObjectURL(file);
if (imgPreview.src) {
  URL.revokeObjectURL(imgPreview.src);
}
imgPreview.src = blobUrl;

Jika anda ingin mengalih keluar imej sepenuhnya daripada tapak web atau aplikasi, sila Gunakan coretan kod sebelumnya dan simpan URL sumber imej semasa dalam pembolehubah blobUrl. Apabila kami perlu memadamkan imej, kami hanya memanggil kaedah URL.revokeObjectURL() dan lulus URL imej yang disimpan sebelum ini.

Kesimpulan:

Mungkin terdapat banyak cara untuk memadam imej setempat dalam JavaScript, tetapi menggunakan kaedah URL.createObjectURL() dan URL.revokeObjectURL() adalah salah satu kaedah yang lebih biasa dan paling berkesan kaedah. Kami boleh menggunakan kaedah ini untuk menambah atau mengemas kini imej tempatan dan memadamkan imej jika perlu.

Atas ialah kandungan terperinci Bagaimana untuk memadam javascript imej tempatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!