I am trying to retreive the actual height and width of an image through javascript.
The image source being used in my case is a BLOB which gets generated as soon as a user inserts a file.

Heres my code:

    var img = document.createElement('img');

    var blob = URL.createObjectURL(e.target.files[0]);

    img.src = blob;

    console.log(img);

    var w = img.width;

    var h = img.height;

    console.log(NEW IMAGE width, w);

    console.log(NEW IMAGE height: , h);

Here are the logs:

<img src=​blob:​http%3A/​/​localhost%3A3000/​af3e5a35-8c1c-40b5-ad5a-379c3ab1ec1d>​

NEW IMAGE width 0

NEW IMAGE height:  0

the blob is correct since I can view the image in my browser.

When I create another image in my console with the same blob and try to retreive the height and width everything works just fine.

But when I try to run it like that in my onChange event form the input i just get 0 for height and width.