Bagaimana untuk Mendapatkan Pelayar Silang Dimensi Imej Asal?

Susan Sarandon
Lepaskan: 2024-10-18 18:22:03
asal
658 orang telah melayarinya

How to Retrieve Original Image Dimensions Cross Browser?

Mendapatkan semula Dimensi Imej Asal Silang Penyemak Imbas

Menentukan dimensi fizikal imej yang diubah saiz sebelah klien boleh menjadi satu cabaran merentas penyemak imbas yang berbeza. Walau bagaimanapun, terdapat dua pilihan yang boleh dipercayai dan bebas rangka kerja yang tersedia:

Pilihan 1: Menggunakan offsetWidth dan offsetHeight

Alih keluar atribut lebar dan tinggi daripada elemen imej (< ;img> Kemudian, gunakan sifat offsetWidth dan offsetHeight untuk mendapatkan semula lebar dan ketinggian sebenar imej yang diubah saiz:

<code class="javascript">const img = document.querySelector('img');

img.removeAttribute('width');
img.removeAttribute('height');

const width = img.offsetWidth;
const height = img.offsetHeight;</code>
Salin selepas log masuk

Pilihan 2: Menggunakan Objek Imej JavaScript

Buat objek Imej JavaScript baharu, tetapkan atribut srcnya kepada URL imej, dan kemudian gunakan sifat lebar dan tinggi untuk mendapatkan semula dimensi asal:

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

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>
Salin selepas log masuk

Perhatikan bahawa dalam pilihan ini, imej tidak perlu ditambahkan pada halaman untuk dimuatkan dan dimensinya ditentukan.

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

sumber:php
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!