Wie kann ich die Größe und Abmessungen der Bilddatei in JavaScript ermitteln?

Bestimmen der Bilddateigröße und -abmessungen in Javascript

In einer Webanwendung die Dateigröße (in KB) und Auflösung eines Bildes direkt bestimmen Der Browserkontext ist für verschiedene Zwecke unerlässlich, beispielsweise für die Anzeige dieser Informationen auf der Seite. In diesem Artikel werden Lösungen untersucht, um diese browserübergreifende Funktionalität zu erreichen, ohne auf ActiveX-Steuerelemente oder Java-Applets angewiesen zu sein.

Bildabmessungen abrufen

Um die Pixelgröße eines Bildelements zu ermitteln Innerhalb des Browsers, mit Ausnahme von Rahmen und Rand, kann man clientWidth und clientHeight verwenden Eigenschaften:

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

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

Dateigröße bestimmen

Leider fehlt den Browser-APIs die direkte Unterstützung für den Zugriff auf die Dateigröße eines Bildes. Eine Problemumgehung besteht jedoch darin, eine HEAD-HTTP-Anfrage mit Ajax zu stellen:

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

Hinweis: Diese Methode unterliegt der Same-Origin-Richtlinie und erlaubt Anfragen nur innerhalb derselben Domäne.

Zusätzliche Überlegungen

• Der Content-Length-Headerwert ist möglicherweise nicht genau Geben Sie die tatsächliche Bildgröße wieder, wenn die Antwort komprimiert ist (z. B. gzip).
• Um die ursprünglichen Bildabmessungen zu erhalten, ohne das Bild vollständig in das Dokument zu laden, erstellen Sie programmgesteuert ein Bildelement und weisen Sie die Bildquelle zu:

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 kann ich die Größe und Abmessungen der Bilddatei in JavaScript ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!