Bagaimanakah Saya Boleh Mendapatkan Saiz dan Dimensi Fail Imej dalam JavaScript?

Menentukan Saiz dan Dimensi Fail Imej dalam Javascript

Dalam aplikasi web, menentukan saiz fail imej (dalam kb) dan resolusi terus daripada konteks penyemak imbas adalah penting untuk pelbagai tujuan, seperti memaparkan maklumat ini pada halaman. Artikel ini meneroka penyelesaian untuk mencapai fungsi merentas penyemak imbas ini tanpa bergantung pada kawalan ActiveX atau applet Java.

Mengambil Dimensi Imej

Untuk mendapatkan saiz piksel elemen imej dalam pelayar, tidak termasuk sempadan dan margin, seseorang boleh menggunakan clientWidth dan clientHeight sifat:

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

Menentukan Saiz Fail

Malangnya, API penyemak imbas kekurangan sokongan langsung untuk mengakses saiz fail imej. Walau bagaimanapun, penyelesaian melibatkan membuat permintaan HTTP HEAD menggunakan Ajax:

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

Nota: Kaedah ini tertakluk pada dasar asal yang sama, membenarkan permintaan hanya dalam domain yang sama.

Pertimbangan Tambahan

• Pertimbangan Nilai pengepala Kandungan-Panjang mungkin tidak menggambarkan saiz imej sebenar dengan tepat jika respons dimampatkan (cth., gzip).
• Untuk mendapatkan dimensi imej asal tanpa memuatkan imej sepenuhnya ke dalam dokumen, cipta elemen imej secara pengaturcaraan dan tetapkan sumber imej:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Saiz dan Dimensi Fail Imej dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!