Wie kann ich Bildabmessungen in WebKit-Browsern genau ermitteln?

Genaues Abrufen von Bildabmessungen in Webkit-Browsern

Das Messen der tatsächlichen Abmessungen eines Bildes kann in Webkit-Browsern wie Safari und Chrome eine Herausforderung sein. Herkömmliche Methoden wie das Entfernen von Inline-Breiten- und Höhenattributen und das Messen der tatsächlichen Abmessungen des Bildes berücksichtigen nicht, dass diese Browser die Abmessungen nach dem Laden des Bildes festlegen.

Nutzung des Onload-Ereignisses des Bildes

Anstatt sich auf Zeitüberschreitungen zu verlassen, besteht ein zuverlässigerer Ansatz darin, das Onload-Ereignis des Bildes zu nutzen. Dadurch können Sie die Abmessungen erfassen, sobald das Bild vollständig geladen ist:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Nutzung der Attribute NaturalHeight und NaturalWidth

Moderne Browser unterstützen die HTML5-Attribute naturalHeight und naturalWidth. die unabhängig von CSS die wahren Abmessungen eines Bildes liefern. Dieser Ansatz ist prägnanter:

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

Durch die Verwendung dieser Techniken können Sie die tatsächliche Breite und Höhe von Bildern in Webkit-Browsern genau abrufen und so eine präzisere Bildbearbeitung und -anzeige ermöglichen.

Das obige ist der detaillierte Inhalt vonWie kann ich Bildabmessungen in WebKit-Browsern genau ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!