Wie kann man die Originalabmessungen von skalierten Bildern in verschiedenen Browsern genau messen?

Enthüllung der Originalabmessungen clientseitig verkleinerter Bilder in verschiedenen Browsern

Ermitteln der wahren Abmessungen eines Bildes, dessen Größe auf dem Client geändert wurde Seite ist eine entscheidende Aufgabe für viele Webentwicklungsszenarien. Unabhängig davon, ob Sie Bilder für responsive Layouts anpassen oder Benutzern die Originalgröße anzeigen, ist es wichtig, eine zuverlässige Lösung zu finden, die in allen Browsern konsistent funktioniert.

Option 1: OffsetWidth und OffsetHeight freisetzen

Ein Ansatz besteht darin, die Breiten- und Höhenattribute aus dem zu entfernen. Element und Abrufen seiner OffsetWidth und OffsetHeight. Diese Technik eliminiert die Möglichkeit, dass CSS-Stile die ursprünglichen Abmessungen überschreiben.

<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: Nutzung von JavaScript-Bildobjekten

Eine alternative Methode nutzt JavaScript-Bildobjekte. Erstellen Sie ein Image-Objekt, weisen Sie die Bildquelle seiner src-Eigenschaft zu und greifen Sie direkt auf seine Breiten- und Höheneigenschaften zu, nachdem das Bild geladen wurde.

<code class="javascript">const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler</code>

Denken Sie daran, die Bedeutung der Ereignisbehandlung anzuerkennen. Bei großen Bildern kann die Verwendung des Ansatzes in Option 2 ohne das Onload-Ereignis zu leeren Ergebnissen führen, da das Bild möglicherweise noch nicht geladen wurde, wenn die Codeausführung ausgeführt wird.

Durch den Einsatz dieser browserunabhängigen Techniken können Sie sicher sein Bestimmen Sie die wahren Abmessungen von Bildern mit geänderter Größe und verleihen Sie Ihren Webanwendungen mehr Präzision und Flexibilität.

Das obige ist der detaillierte Inhalt vonWie kann man die Originalabmessungen von skalierten Bildern in verschiedenen Browsern genau messen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!