Bagaimanakah anda menentukan saiz dan dimensi imej dalam pelayar web?

Menentukan Saiz dan Dimensi Fail Imej dalam Penyemak Imbas

Pengenalan

Dalam pembangunan web, selalunya perlu untuk mendapatkan maklumat tentang imej yang dipaparkan pada halaman web, seperti saiz dan resolusi fail mereka. Maklumat ini boleh berguna untuk tujuan paparan atau untuk mengoptimumkan prestasi halaman.

Penyelesaian

Saiz Fail:

1. XMLHttpRequest (Permintaan HEAD): Kaedah ini membolehkan anda mendapatkan semula saiz fail yang dihoskan pada pelayan tanpa memuat turun keseluruhan fail. Respons termasuk pengepala Panjang Kandungan yang menentukan saiz fail dalam bait.

   var xhr = new XMLHttpRequest();
   xhr.open('HEAD', 'img/test.jpg', true);
   xhr.onload = function() {
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
   };
   xhr.send();

Resolusi (dimensi piksel dalam penyemak imbas):

1. clientWidth/clientHeight: Sifat ini mengembalikan lebar dan ketinggian piksel elemen DOM, termasuk kandungan, tetapi tidak termasuk jidar dan jidar.

   var img = document.getElementById('imageId');
   
   var width = img.clientWidth;
   var height = img.clientHeight;

Dimensi Asal (saiz imej sebelum pemaparan penyemak imbas):

1. Buat Elemen Imej Secara Program: Cipta elemen imej dalam DOM dan tetapkan sumbernya kepada URL imej. Setelah imej dimuatkan, anda boleh mengakses sifat lebar dan ketinggiannya untuk mendapatkan dimensi asal.

   var img = document.createElement('img');
   
   img.onload = function() {
     alert(img.width + ' x ' + img.height);
   };
   
   img.src = 'http://sstatic.net/so/img/logo.png';

Nota

• Pertimbangkan pemampatan gzip apabila menggunakan Kaedah Panjang Kandungan, kerana ia mungkin memberikan maklumat saiz fail yang tidak tepat.
• Pastikan anda mematuhi Dasar Asal Yang Sama apabila membuat permintaan Ajax merentas domain.

Atas ialah kandungan terperinci Bagaimanakah anda menentukan saiz dan dimensi imej dalam pelayar web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!