Wie kann ich mit JavaScript die Dateigröße und die Abmessungen eines Bildes bestimmen?

Größe und Abmessungen von Bilddateien mit Javascript bestimmen

In Webanwendungen ist es notwendig, Informationen über auf Webseiten angezeigte Bilder abzurufen. Eine häufige Anforderung besteht darin, die Dateigröße und Auflösung eines Bildes vollständig im Browserkontext zu bestimmen. In diesem Artikel werden verschiedene browserübergreifende Techniken zur Bewältigung dieser Aufgabe untersucht.

Bildabmessungen ermitteln

Um die Auflösung eines auf der Webseite angezeigten Bildes zu bestimmen, können Sie Folgendes verwenden: die Eigenschaften clientWidth und clientHeight des DOM-Elements, das das Bild enthält. Dieser Ansatz gibt die Pixelabmessungen des Bildes im Browser zurück, ohne etwaige Ränder oder Ränder.

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

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

Dateigröße abrufen

Um die Dateigröße eines zu erhalten Um ein Bild zu erstellen, besteht eine Möglichkeit darin, die im Internet Explorer verfügbare fileSize-Eigenschaft für Dokument- und IMG-Elemente zu verwenden. Dieser Ansatz ist jedoch auf den IE beschränkt und wird in anderen Browsern nicht unterstützt.

Verwenden von HEAD-HTTP-Anfragen

Eine vielseitigere Technik besteht darin, eine HTTP-HEAD-Anfrage an den zu senden URL des Bildes. HEAD-Anfragen rufen Metadaten zu einer Ressource ab, ohne deren Inhalt herunterzuladen. Die Antwortheader enthalten die Content-Length, die die Dateigröße in Bytes darstellt.

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: Ajax-Anfragen unterliegen der Same-Origin-Richtlinie, was bedeutet, dass sie nur auf Ressourcen zugreifen können von derselben Domain wie die Webseite.

Originalbildabmessungen abrufen

Zur Bestimmung Um die ursprünglichen Abmessungen eines Bildes vor der Größenänderung oder dem Zuschneiden zu ermitteln, können Sie ein IMG-Element programmgesteuert erstellen und sein Onload-Ereignis festlegen, um seine Abmessungen 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 kann ich mit JavaScript die Dateigröße und die Abmessungen eines Bildes bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!