Bagaimanakah saya boleh menentukan saiz fail dan dimensi imej menggunakan JavaScript?

Menentukan Saiz dan Dimensi Fail Imej dengan Javascript

Dalam aplikasi web, adalah perlu untuk mendapatkan maklumat tentang imej yang dipaparkan pada halaman web. Satu keperluan biasa adalah untuk menentukan saiz dan resolusi fail imej sepenuhnya dalam konteks penyemak imbas. Artikel ini meneroka pelbagai teknik silang penyemak imbas untuk menyelesaikan tugas ini.

Mendapatkan Dimensi Imej

Untuk menentukan resolusi imej yang dipaparkan pada halaman web, anda boleh menggunakan sifat clientWidth dan clientHeight bagi elemen DOM yang mengandungi imej. Pendekatan ini mengembalikan dimensi piksel imej dalam penyemak imbas, tidak termasuk sebarang sempadan atau jidar.

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

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

Mengambil Saiz Fail

Untuk mendapatkan saiz fail imej, satu pilihan ialah menggunakan sifat fileSize yang tersedia dalam Internet Explorer untuk elemen dokumen dan IMG. Walau bagaimanapun, pendekatan ini terhad kepada IE dan tidak disokong dalam penyemak imbas lain.

Menggunakan Permintaan HTTP HEAD

Teknik yang lebih serba boleh ialah mengeluarkan permintaan HTTP HEAD kepada URL imej. HEAD meminta untuk mendapatkan semula metadata tentang sumber tanpa memuat turun kandungannya. Pengepala respons termasuk Panjang Kandungan, yang mewakili 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);

Nota: Permintaan Ajax tertakluk pada dasar asal yang sama, bermakna mereka hanya boleh mengakses sumber daripada domain yang sama dengan halaman web.

Mendapatkan Imej Asal Dimensi

Untuk menentukan dimensi asal imej sebelum mengubah saiz atau memangkas, anda boleh mencipta elemen IMG secara pengaturcaraan dan menetapkan acara onloadnya untuk mendapatkan semula dimensinya.

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 menentukan saiz fail dan dimensi imej menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!