Wie erhalte ich mit JavaScript die Größe und Abmessungen einer Bilddatei?

Dateigröße und -abmessungen von Bildern über JavaScript ermitteln

Frage:

Wie können Sie Bestimmen Sie die Dateigröße (in KB) und die Auflösung eines auf einer Webseite gerenderten Bildes nur mit JavaScript in einem browserübergreifenden kompatiblen Gerät Art und Weise?

Antwort:

Pixelabmessungen abrufen:

Um die aktuelle Pixelgröße eines Bildes im Browser abzurufen Element, mit Ausnahme von Rändern und Rändern, verwenden Sie das folgende JavaScript:

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

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

Abrufen Dateigröße:

• Option 1: HEAD-HTTP-Anfrage (empfohlen)

Stellen Sie eine HEAD-Anfrage an den Server, der das Bild hostet XMLHttpRequest. Der Content-Length-Header in der HTTP-Antwort enthält die Dateigröße in Bytes.

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

• Option 2: Elementdateigrößeneigenschaft (nur IE)

Diese Methode ist nur im Internet Explorer anwendbar:

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

Originalbild abrufen Abmessungen:

Erstellen Sie programmgesteuert ein IMG-Element und verwenden Sie sein Onload-Ereignis, um die ursprünglichen Bildabmessungen abzurufen:

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

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

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

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit JavaScript die Größe und Abmessungen einer Bilddatei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!