Wie kann ich die ursprünglichen Bildabmessungen browserübergreifend abrufen?

Originalbildabmessungen browserübergreifend abrufen

Das Bestimmen der physischen Abmessungen eines Bildes, dessen Größe clientseitig geändert wurde, kann in verschiedenen Browsern eine Herausforderung sein. Es stehen jedoch zwei zuverlässige und Framework-unabhängige Optionen zur Verfügung:

Option 1: OffsetWidth und offsetHeight verwenden

Entfernen Sie die Breiten- und Höhenattribute aus dem Bildelement (< ;img>-Tag). Verwenden Sie dann die Eigenschaften offsetWidth und offsetHeight, um die tatsächliche Breite und Höhe des geänderten Bildes abzurufen:

<code class="javascript">const img = document.querySelector('img');

img.removeAttribute('width');
img.removeAttribute('height');

const width = img.offsetWidth;
const height = img.offsetHeight;</code>

Option 2: JavaScript-Bildobjekt verwenden

Erstellen Sie ein Erstellen Sie ein neues JavaScript-Bildobjekt, legen Sie dessen src-Attribut auf die Bild-URL fest und verwenden Sie dann die Eigenschaften width und height, um die ursprünglichen Abmessungen abzurufen:

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

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>

Beachten Sie, dass das Bild bei dieser Option nicht unbedingt sein muss der Seite hinzugefügt werden, damit es geladen und seine Abmessungen bestimmt werden können.

Das obige ist der detaillierte Inhalt vonWie kann ich die ursprünglichen Bildabmessungen browserübergreifend abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!