Bagaimana Mendapatkan Saiz dan Dimensi Fail Imej Menggunakan JavaScript?

Menentukan Saiz Fail dan Dimensi Imej melalui JavaScript

Soalan:

Bagaimana anda boleh tentukan saiz fail (dalam KB) dan resolusi imej yang dipaparkan pada halaman web hanya menggunakan JavaScript dalam cara yang serasi merentas pelayar?

Jawapan:

Mendapatkan Dimensi Piksel:

Untuk mendapatkan semula saiz piksel dalam penyemak imbas semasa elemen imej, tidak termasuk jidar dan jidar, gunakan JavaScript berikut:

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

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

Mengambil Saiz Fail:

• Pilihan 1: Permintaan HTTP HEAD (Disyorkan)

Buat permintaan HEAD kepada pelayan yang mengehos imej menggunakan XMLHttpRequest. Pengepala Panjang Kandungan dalam respons HTTP mengandungi saiz fail dalam bait.

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

• Pilihan 2: Sifat Saiz Fail Elemen (IE Sahaja)

Kaedah ini hanya terpakai dalam Internet Explorer:

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

Mendapatkan Dimensi Imej Asal:

Buat elemen IMG secara pemprograman dan gunakan acara onloadnya untuk dapatkan semula 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 Mendapatkan Saiz dan Dimensi Fail Imej Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!