Enthüllung der Originalabmessungen clientseitig verkleinerter Bilder in verschiedenen Browsern

Bestimmung 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 den 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 -Element zu entfernen und dessen offsetWidth und offsetHeight abzurufen. Diese Technik eliminiert die Möglichkeit, dass CSS-Stile die ursprünglichen Abmessungen überschreiben.

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

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.

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

Denken Sie daran, die Wichtigkeit 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.