Bagaimana untuk Menentukan Saiz dan Dimensi Fail Imej dengan JavaScript?

Menentukan Saiz dan Dimensi Fail Imej melalui JavaScript

Dalam artikel ini, kami akan meneroka cara menentukan saiz fail (dalam kilobait) dan peleraian imej secara langsung dalam konteks penyemak imbas menggunakan JavaScript. Maklumat ini boleh menjadi berharga untuk memaparkannya di halaman web atau untuk melakukan pelbagai operasi.

Mendapatkan semula Dimensi Piksel

Untuk mendapatkan saiz piksel semasa elemen imej dalam pelayar, tidak termasuk sempadan dan marginnya, gunakan clientWidth dan clientHeight sifat.

Mendapatkan Saiz Fail

Mendapatkan saiz fail yang dihoskan pelayan boleh dicapai melalui Permintaan HTTP HEAD Ajax. Kaedah ini mendapatkan semula pengepala HTTP tanpa memindahkan kandungan fail. Pengepala Panjang Kandungan menyediakan saiz fail dalam bait.

Nota: Pendekatan ini tertakluk pada Dasar Asal Sama, yang mengehadkan permintaan kepada domain yang sama.

Mendapatkan semula Dimensi Imej Asal

Untuk menentukan dimensi asal imej, cipta elemen Imej HTML secara dinamik. Tetapkan acara onloadnya untuk mengakses sifat lebar dan ketinggiannya selepas imej dimuatkan.

Contoh Kod:

• Pixel Dimensi:

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

• Saiz Fail menggunakan Permintaan HEAD:

  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);

• Dimensi Imej Asal:

  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 Bagaimana untuk Menentukan Saiz dan Dimensi Fail Imej dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!