Rumah  >  Artikel  >  hujung hadapan web  >  Adakah Saiz Semula Imej Sebelah Pelanggan Mungkin dengan JavaScript?

Adakah Saiz Semula Imej Sebelah Pelanggan Mungkin dengan JavaScript?

Linda Hamilton
Linda Hamiltonasal
2024-10-19 10:35:30248semak imbas

Is Client-Side Image Resizing Possible with JavaScript?

Saiz Semula Imej Bahagian Klien dengan JavaScript Sebelum Muat Naik

Mengubah saiz imej sisi klien menawarkan beberapa kelebihan sebelum ia dimuat naik ke pelayan. Ia mengurangkan beban pelayan, mempercepatkan pemaparan halaman dan memberikan pengalaman pengguna yang lebih baik.

Adakah Saiz Semula Imej JavaScript Sebelah Pelanggan Mungkin?

Ya, adalah mungkin untuk ubah saiz imej sisi klien menggunakan JavaScript. Terdapat algoritma sumber terbuka tersedia yang membolehkan saiz semula tanpa menggunakan Flash.

Algoritma untuk Saiz Semula Imej Sebelah Pelanggan

Satu algoritma sedemikian tersedia di GitHub: https: //gist.github.com/dcollien/312bce1270a5f511bf4a. Ia termasuk versi dalam JavaScript ES6 dan vanila yang boleh dibenamkan ke dalam mana-mana aplikasi web.

Contoh Penggunaan

Untuk menggunakan algoritma:

  1. Benamkan kod JavaScript yang disediakan ke dalam halaman web anda.
  2. Tentukan input untuk pemilihan fail dan nyatakan teg imej untuk memaparkan imej yang diubah saiz.
  3. Dalam pendengar acara onchange untuk input, gunakan fungsi ubah saiz yang disediakan oleh algoritma. Tentukan dimensi yang diingini dan fungsi panggil balik.
  4. Fungsi panggil balik akan menerima gumpalan saiz semula dan bendera yang menunjukkan sama ada ubah saiz berjaya.
  5. Gunakan gumpalan yang dikembalikan untuk menetapkan atribut src bagi tag imej untuk pratonton imej yang diubah saiz.

Ciri

  • Menyokong kedua-dua ES6 dan JavaScript vanila.
  • Mengesan keupayaan penyemak imbas secara automatik dan menggunakan polyfill untuk keserasian optimum.
  • Abaikan imej GIF animasi untuk mengekalkan integritinya.

Atas ialah kandungan terperinci Adakah Saiz Semula Imej Sebelah Pelanggan Mungkin dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn