Wie kann man die ursprüngliche Bildgröße browserübergreifend bestimmen?

Bestimmen der ursprünglichen Bildgröße browserübergreifend

In der Webentwicklung ist die Größenänderung von Bildern auf der Clientseite eine gängige Praxis, um die Seitenleistung und Reaktionsfähigkeit zu optimieren . Aufgrund von Browser-Inkonsistenzen kann es jedoch schwierig sein, die ursprünglichen physischen Abmessungen eines in der Größe geänderten Bildes zu bestimmen. In diesem Artikel werden zwei zuverlässige, Framework-unabhängige Optionen zum Abrufen dieser Informationen untersucht.

Option 1: Verwendung von OffsetWidth und OffsetHeight

Diese Methode beinhaltet das Entfernen der expliziten Breiten- und Höhenattribute aus dem Element. Anschließend können Sie auf die Eigenschaften offsetWidth und offsetHeight zugreifen, um die tatsächliche Breite und Höhe des in der Größe geänderten Bilds abzurufen. Diese Option ist einfach und wird von den meisten gängigen Browsern unterstützt.

Option 2: JavaScript-Bildobjekt verwenden

Der zweite Ansatz besteht darin, ein JavaScript-Bildobjekt zu erstellen und dessen src-Attribut festzulegen auf die Bildquelle zugreifen und auf die Breiten- und Höheneigenschaften zugreifen. Beachten Sie, dass das Bild nicht zur Seite hinzugefügt werden muss, damit dies funktioniert.

Hier ist ein Beispiel-Codeausschnitt:

<code class="javascript">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Bearbeitet von Pekka:

Um genaue Ergebnisse bei großen Bildern zu gewährleisten, kann das Onload-Ereignis des Bildes zum Auslösen der Funktion verwendet werden. Andernfalls sind Höhe und Breite möglicherweise nicht verfügbar, bevor das Bild vollständig geladen ist.

Das obige ist der detaillierte Inhalt vonWie kann man die ursprüngliche Bildgröße browserübergreifend bestimmen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!