Wie erhalte ich genaue Bildabmessungen in WebKit-Browsern?

Abrufen echter Bildabmessungen in WebKit-Browsern

Versuch, die tatsächliche Breite und Höhe eines Bildes mithilfe von JavaScript in WebKit-Browsern zu bestimmen, z Safari oder Chrome führen häufig zu Nullwerten. Dies liegt daran, dass WebKit diese Eigenschaften erst aktualisiert, nachdem das Bild vollständig geladen wurde.

Um diese Einschränkung zu überwinden, empfehlen wir, das Onload-Ereignis des Bildes anstelle von Zeitüberschreitungen zu verwenden. Dieser Ansatz ermöglicht es uns, die tatsächlichen Abmessungen genauer abzurufen:

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

Diese Technik stellt sicher, dass wir die tatsächlichen Bildabmessungen ohne Beeinträchtigung durch das CSS-Styling abrufen.

Eine andere Möglichkeit besteht darin, die zu nutzen HTML5-Attribute naturalHeight und naturalWidth. Diese Attribute stellen die intrinsischen, nicht gestylten Abmessungen des Bildes bereit, unabhängig von der CSS-Manipulation:

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

Durch die Implementierung dieser Methoden können wir in WebKit-Browsern wie Safari und Chrome genau auf die wahren Abmessungen eines Bildes zugreifen.

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