Frank Bannister Frank Bannister - 4 months ago 20
Javascript Question

Get real image width and height with JavaScript in Safari/Chrome?

I am creating a jQuery plugin.

How do I get real image width and height with Javascript in Safari?

Following works with Firefox 3, IE7 and Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");

var pic_real_width = pic.width();
var pic_real_height = pic.height();


But in Webkit browsers like Safari and Google Chrome values are 0...

Doing this on server side is not an option.

Answer

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I'd recommend using an image's onload event. Here's a quick example:

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

To avoid any of the effects CSS might have on the image's dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

Comments