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

Das Bestimmen der ursprünglichen physischen Abmessungen eines Bildes, dessen Größe clientseitig geändert wurde, kann eine sein Cross-Browser-Herausforderung. Es gibt jedoch zuverlässige und Framework-unabhängige Methoden, um dies zu erreichen:

Option 1: Dynamisches Lesen der Bilddimensionen

Entfernen Sie alle vordefinierten Breiten- und Höhenattribute aus dem Bild-HTML Element. Das System passt die Abmessungen automatisch an die Anzeigeanforderungen an. Verwenden Sie anschließend JavaScript, um auf die Eigenschaften offsetWidth und offsetHeight des Elements zuzugreifen, die die geänderte Breite und Höhe darstellen.

Option 2: JavaScript-Bildobjekt

Erstellen Sie ein JavaScript-Bildobjekt und weisen Sie die Quelle des in der Größe geänderten Bildes seiner Eigenschaft src zu. Sobald das Bild geladen ist, behalten die Breiten- und Höheneigenschaften des Objekts die ursprünglichen Abmessungen bei. Sie können das Onload-Ereignis verwenden, um diesen Vorgang asynchron auszuführen und so sicherzustellen, dass das Bild vollständig geladen ist, bevor die Abmessungen abgerufen werden.

Codebeispiel:

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; // Do this after setting `onload`
}

Hinweis: Wenn Sie Probleme mit großen Bildern haben, die keine Abmessungen zurückgeben, sollten Sie die Verwendung des Onload-Ereignisses innerhalb des JavaScript-Objekts in Betracht ziehen. Dadurch wird sichergestellt, dass das Bild vollständig geladen ist, bevor auf seine Eigenschaften zugegriffen wird.