base64 image decoding intermittently reporting 1x1 dimensions

Question

Using ie9/ie10, I am trying to detect the dimensions of a base64 image. My code works in the other current browsers. These are the steps I follow:

1. ajax down a base64 string,
2. create a new Image() object,
3. set the base64 string as the src,
4. use imagesloaded OR wait for the onload event

Moments later arrives a successful loaded callback, but... the image dimensions are reported as 1x1. Sometimes. Other times it works just fine.

So... how do I detect when the image is... decoded? Not sure what is going on here.

Answer 1

Use onload callback. Your image is not downloaded yet when you first try to get its size. That is why you get wrong size.

image.onload = function () {
  console.log(this.width);
}

Answer 2

Try to use naturalWidth instead of width . It works for me in Internet Explorer 10.