Bagaimana untuk Mengukur Dimensi Asal Imej Saiz Saiz Dengan Tepat dalam Pelayar Berbeza?

Menyingkap Dimensi Asal Imej Saiz Sebelah Pelanggan Merentasi Penyemak Imbas

Menentukan dimensi sebenar imej yang telah diubah saiz pada klien sampingan adalah tugas penting untuk banyak senario pembangunan web. Sama ada anda melaraskan imej untuk reka letak responsif atau memaparkan saiz asal kepada pengguna, mencari penyelesaian yang boleh dipercayai yang berfungsi secara konsisten merentas penyemak imbas adalah penting.

Pilihan 1: Melancarkan OffsetWidth dan OffsetHeight

Satu pendekatan melibatkan mengalih keluar atribut lebar dan ketinggian daripada elemen dan mendapatkan semula offsetWidth dan offsetHeight. Teknik ini menghapuskan kemungkinan gaya CSS mengatasi dimensi asal.

<code class="javascript">const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;</code>

Pilihan 2: Memanfaatkan Objek Imej JavaScript

Kaedah alternatif menggunakan objek Imej JavaScript. Cipta objek Imej, tetapkan sumber imej kepada sifat srcnya dan akses terus sifat lebar dan ketinggiannya selepas imej dimuatkan.

<code class="javascript">const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler</code>

Ingat untuk mengakui kepentingan pengendalian acara. Dengan imej yang besar, menggunakan pendekatan dalam Pilihan 2 tanpa acara onload mungkin menghasilkan hasil kosong kerana imej mungkin belum dimuatkan lagi apabila pelaksanaan kod dijalankan.

Dengan menggunakan teknik agnostik penyemak imbas ini, anda boleh yakin tentukan dimensi sebenar imej yang diubah saiz, memperkasakan aplikasi web anda dengan ketepatan dan fleksibiliti yang dipertingkatkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengukur Dimensi Asal Imej Saiz Saiz Dengan Tepat dalam Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!