title: Can't get height and width of image in javascript
body: <p>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.</p>
  
  <p>Heres my code:</p>
  
  <pre><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);
  </code></pre>
  
  <p>Here are the logs:</p>
  
  <pre><code>&lt;img src=​"blob:​http%3A/​/​localhost%3A3000/​af3e5a35-8c1c-40b5-ad5a-379c3ab1ec1d"&gt;​
  NEW IMAGE width 0
  NEW IMAGE height:  0
  </code></pre>
  
  <p>the blob is correct since I can view the image in my browser.</p>
  
  <p>When I create another image in my console with the same blob and try to retreive the height and width everything works just fine.</p>
  
  <p>But when I try to run it like that in my onChange event form the input i just get 0 for height and width.</p>