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

Bestimmen der Bilddateigröße und -abmessungen über JavaScript

In diesem Artikel erfahren Sie, wie Sie die Dateigröße (in Kilobyte) bestimmen und Auflösung eines Bildes direkt im Browserkontext mithilfe von JavaScript. Diese Informationen können wertvoll sein, um sie auf der Webseite anzuzeigen oder verschiedene Vorgänge auszuführen.

Pixelabmessungen abrufen

Um die aktuelle Pixelgröße eines Bildelements innerhalb der zu erhalten Browser, mit Ausnahme seines Rahmens und Randes, verwenden clientWidth und clientHeight Eigenschaften.

Abrufen der Dateigröße

Das Abrufen der Größe einer servergehosteten Datei kann über eine Ajax HEAD HTTP-Anfrage erreicht werden. Diese Methode ruft HTTP-Header ab, ohne Dateiinhalte zu übertragen. Der Content-Length-Header gibt die Größe der Datei in Bytes an.

Hinweis: Dieser Ansatz unterliegt der Same Origin Policy, die Anfragen an dieselbe Domäne beschränkt.

Originalbildabmessungen abrufen

Um die Originalabmessungen eines Bildes zu bestimmen, erstellen Sie dynamisch ein HTML-Bildelement. Legen Sie sein onload-Ereignis fest, um auf seine Breiten- und Höheneigenschaften zuzugreifen, nachdem das Bild geladen wurde.

Codebeispiele:

• Pixel Abmessungen:

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

• Dateigröße mit HEAD-Anfrage:

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

• Originalbildabmessungen:

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