Get the Real Width and Height of an Image With JavaScript? (In Safari/Chrome)

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

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.

You can also use the naturalHeight and naturalWidth HTML5 attributes.

Can't retrieve image width in Safari using Javascript but works fine in Chrome

It is likely that Safari does not have access to the image's dimensions, and therefore is unable to compute its width and height when you probe for it.

You should wait for the image to load, which fires an event handler for which you can fetch the image dimensions from within.

Is it right to get the width of an image using this code?

On the linked w3schools site you have this statement:

Style width Property

document.getElementById("myBtn").style.width = "300px";

Definition and Usage

The width property sets or returns the width an element.

However, the part sets or returns the width an element is highly inaccurate and misleading, and that's one of the reasons why w3schools is considered a bad learning resource.

And this part at the end of the page if completely wrong:

Return the width of an <img> element:

alert(document.getElementById("myImg").style.width);

The obj.style.width returns the width property applied to an element through an inline style. But that could be nothing, a pixel value or a relative value.

Assuming img is an HTMLImageElement then img.width will give you the computed width of the element, so it can be different to the linked image resource.

naturalWidth gives the actual dimension of the image.

// wait for the image to be loaded otherwise to could be 0 if no width is enforce through styling
let img = document.querySelector('#img')

document.querySelector('#img').onload = () => {
  console.log('width using .width: ' + img.width) // width using .width: 350
  console.log('width using .naturalWidth: ' + img.naturalWidth)  // width using .width: 350
  console.log('width using .style.width: ' + img.style.width)  // width using .width: 
}

<img id="img" src="https://via.placeholder.com/350x150">

how to get an image actual width and height

Try using naturalWidth and naturalHeight.

var domElement = $('yourImage')[0]; // or document.getElementById('yourImageId');
domElement.naturalWidth
domElement.naturalHeight

Chrome cannot get the width and height from an image created by JavaScript

you need to get width and height after the image loads and understands what its made of.

try:

var image = new Image();
image.onload = function() {
    var width = image.width;
    var height = image.height;
}
image.src = IMAGE_URL;

hope that helps

Chrome not detecting image sizes

Your example does not work:

BFX View -> 0 images found in ...

Anyway, you are trying to read the width before the image is loaded. Have a look at the answer for this question which actually covers the same topic:

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

For huge images i'd recommend to use a server side script that reads the image dimensions, so the client does not have to wait for the loading of all images to fire your script.

---

Related Topics