Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menentukan Dimensi Imej Asal Walaupun Ubah Saiz Pelayar?

Bagaimana untuk Menentukan Dimensi Imej Asal Walaupun Ubah Saiz Pelayar?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-18 18:24:03422semak imbas

How to Determine Original Image Dimensions Despite Browser Resize?

Penentuan Merentasi Penyemak Imbas Dimensi Imej Asal

Menentukan saiz asal imej yang telah diubah saiz pada sisi klien boleh menjadi cabaran disebabkan ketidakkonsistenan penyemak imbas. Walau bagaimanapun, terdapat beberapa pilihan bebas rangka kerja yang boleh dipercayai yang boleh anda pertimbangkan:

Pilihan 1: Alih Keluar Atribut dan Offset Baca

Alih keluar atribut lebar dan ketinggian daripada tag imej. Ini membolehkan anda membaca sifat offsetWidth dan offsetHeight untuk mendapatkan dimensi fizikal sebenar imej.

Pilihan 2: Cipta Objek Imej JavaScript

Buat objek Imej JavaScript dan tetapkan atribut srcnya kepada sumber imej. Kemudian, baca sifat lebar dan ketinggian objek. Anda tidak perlu menambah imej pada halaman untuk kaedah ini berfungsi. Berikut ialah contoh fungsi:

<code class="html">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;
}</code>

Nota: Seperti yang dinyatakan dalam ulasan, adalah penting untuk menjalankan fungsi pada acara onload imej untuk memastikan imej dimuatkan sepenuhnya sebelum cuba membaca dimensinya.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Dimensi Imej Asal Walaupun Ubah Saiz Pelayar?. 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