Wie bestimmen Sie die Größe und Abmessungen eines Bildes in einem Webbrowser?

Bestimmen der Bilddateigröße und -abmessungen im Browser

Einführung

In der Webentwicklung ist es oft notwendig, Informationen über Bilder abzurufen, die auf einem angezeigt werden Webseite, wie z. B. Dateigröße und Auflösung. Diese Informationen können für Anzeigezwecke oder zur Optimierung der Seitenleistung nützlich sein.

Lösung

Dateigröße:

1. XMLHttpRequest (HEAD Request): Mit dieser Methode können Sie die Größe einer auf dem Server gehosteten Datei abrufen, ohne die gesamte Datei herunterzuladen. Die Antwort enthält den Content-Length-Header, der die Dateigröße in Bytes angibt.

   var xhr = new XMLHttpRequest();
   xhr.open('HEAD', 'img/test.jpg', true);
   xhr.onload = function() {
     alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
   };
   xhr.send();

Auflösung (Pixelabmessungen im Browser):

1. clientWidth/clientHeight: Diese Eigenschaften geben die Pixelbreite und -höhe eines DOM-Elements zurück, einschließlich des Inhalts, jedoch ohne Rahmen und Rand.

   var img = document.getElementById('imageId');
   
   var width = img.clientWidth;
   var height = img.clientHeight;

Originalabmessungen (Bildgröße vor Browser-Rendering):

1. Bildelement programmgesteuert erstellen: Erstellen Sie ein Bildelement im DOM und legen Sie als Quelle die Bild-URL fest. Sobald das Bild geladen ist, können Sie auf seine Breiten- und Höheneigenschaften zugreifen, um die Originalabmessungen zu erhalten.

   var img = document.createElement('img');
   
   img.onload = function() {
     alert(img.width + ' x ' + img.height);
   };
   
   img.src = 'http://sstatic.net/so/img/logo.png';

Hinweise

• Berücksichtigen Sie die GZIP-Komprimierung, wenn Sie das verwenden Content-Length-Methode, da sie möglicherweise ungenaue Informationen zur Dateigröße liefert.
• Stellen Sie sicher, dass Sie die Same Origin Policy einhalten, wenn Sie domänenübergreifende Ajax-Anfragen stellen.

Das obige ist der detaillierte Inhalt vonWie bestimmen Sie die Größe und Abmessungen eines Bildes in einem Webbrowser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!