How to Accurately Get Real Image Dimensions in WebKit Browsers?

Retrieving Real Image Dimensions in WebKit Browsers

Attempting to determine the actual width and height of an image using JavaScript in WebKit browsers, such as Safari or Chrome, often results in zero values. This is because WebKit updates these properties only after the image has fully loaded.

To overcome this limitation, we recommend utilizing the image's onload event instead of timeouts. This approach allows us to retrieve the real dimensions more accurately:

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;
    });

This technique ensures that we retrieve the actual image dimensions without any interference from CSS styling.

Another option is to leverage the HTML5 attributes naturalHeight and naturalWidth. These attributes provide the intrinsic, unstyled dimensions of the image, regardless of CSS manipulation:

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

By implementing these methods, we can accurately access the true dimensions of an image in WebKit browsers like Safari and Chrome.

The above is the detailed content of How to Accurately Get Real Image Dimensions in WebKit Browsers?. For more information, please follow other related articles on the PHP Chinese website!