Bagaimana untuk Menentukan Pelayar Silang Saiz Imej Asal?

Menentukan Saiz Imej Asal Silang Penyemak Imbas

Dalam pembangunan web, mengubah saiz imej pada bahagian klien adalah amalan biasa untuk mengoptimumkan prestasi halaman dan responsif . Walau bagaimanapun, penentuan dimensi fizikal asal imej yang diubah saiz boleh menjadi mencabar kerana ketidakkonsistenan penyemak imbas. Artikel ini meneroka dua pilihan yang boleh dipercayai dan bebas rangka kerja untuk mendapatkan maklumat ini.

Pilihan 1: Menggunakan OffsetWidth dan OffsetHeight

Kaedah ini melibatkan mengalih keluar atribut lebar dan ketinggian eksplisit daripada unsur. Selepas itu, anda boleh mengakses sifat offsetWidth dan offsetHeight untuk mendapatkan semula lebar dan ketinggian sebenar imej yang diubah saiz. Pilihan ini mudah dan disokong oleh kebanyakan penyemak imbas utama.

Pilihan 2: Menggunakan Objek Imej JavaScript

Pendekatan kedua melibatkan mencipta objek Imej JavaScript, menetapkan atribut srcnya ke sumber imej, dan mengakses sifat lebar dan ketinggiannya. Ambil perhatian bahawa imej tidak perlu ditambahkan pada halaman untuk ini berfungsi.

Berikut ialah contoh coretan kod:

<code class="javascript">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Edit oleh Pekka:

Untuk memastikan hasil yang tepat dengan imej besar, peristiwa onload imej boleh digunakan untuk mencetuskan fungsi. Jika tidak, ketinggian dan lebar mungkin tidak tersedia sebelum imej selesai dimuatkan.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Pelayar Silang Saiz Imej Asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!