Wie kann ich Bildabmessungen in WebKit-Browsern (Safari und Chrome) genau abrufen?

Abrufen genauer Bildabmessungen in Webkit-Browsern (Safari, Chrome)

Im Bereich der Javascript-Bildbearbeitung kann das Ermitteln der wahren Breite und Höhe eines Bildes eine Herausforderung darstellen , insbesondere in Webkit-Browsern wie Safari und Chrome.

Problemübersicht

Bei der Verwendung jQuery in Firefox 3, IE7 und Opera 9 extrahiert das folgende Codefragment effektiv die tatsächlichen Bildabmessungen:

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

In Webkit-Browsern führt dieser Ansatz jedoch zu falschen Werten von 0.

Lösung: Javascripts Image Loading Event

Die Lösung liegt darin, das Onload-Event des Bildelements anzuzapfen. Mit dem untenstehenden modifizierten Code wird dies erreicht:

var img = $("img")[0]; // Get the image element

$("<img/>") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

Indem wir eine Speicherkopie des Bildes erstellen und das Schlüsselwort this im Load-Ereignis verwenden, umgehen wir alle potenziellen CSS-Effekte, die die Abmessungen des Bildes verändern könnten.

Alternative: HTML5-Bildattribute

Für die Kompatibilität mit HTML5-Browsern können Sie auch naturalHeight und naturalWidth nutzen Attribute:

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

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