16

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.

noa-dev
  • 3,561
  • 9
  • 34
  • 72

4 Answers4

19

you should get size after image loaded:

    img.onload = getSize;//measure after loading or you will get 0

example and result

jilykate
  • 5,430
  • 2
  • 17
  • 26
16

Need to take the width and height after the image got loaded. So need to give some time to load the image.Else you will get zero size always.Take the width/height inside onload event.

var img = document.createElement('img');
    var blob = URL.createObjectURL(e.target.files[0]);
    img.src = blob;
    img.onload = function() {
      var w = img.width;
      var h = img.height;
      console.log("NEW IMAGE width", w);
      console.log("NEW IMAGE height: ", h);
    }
Nofi
  • 2,107
  • 1
  • 15
  • 23
  • It says "img.onload is not a function" – noa-dev Jan 19 '16 at 19:12
  • 1
    Can u try this...It should work img.onload = function() { var w = img.width; var h = img.height; console.log("NEW IMAGE width", w); console.log("NEW IMAGE height: ", h); } – Nofi Jan 20 '16 at 06:01
  • In comment formatting is not good..I have edited my post directly...Please try that and let me know....Please find the fiddle demo in "http://jsfiddle.net/Nofiden/vz844evq/" ...After loading the full picture you will get an alert showing width and height. – Nofi Jan 20 '16 at 06:09
2

How to get height and width of the image in blob objeact? example:

$(function(){
 $("input[name=file_name]").on('change',function(){
  var url = window.URL || window.webkitURL || window.mozURL;
  var src = url.createObjectURL($(this)[0].files[0]);
  $("#box").html('<img src="'+src+'">');
  $("#box img").attr('width','100');
  $('img')[0].onload = function() {
      console.log($(this).height()); //get image height by jQuery
      console.log($(this)[0].height)// get image height by javascript
      console.log($(this)[0].naturalHeight);//get real height by javascript
      /**
       * if you want to get the image's width,you can use following code :
       * $(this).width();
       * $(this)[0].width;
       * $(this)[0].naturalWidth;
       */
  };
 })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" enctype="multipart/form-data">
  <input type="file" name="file_name">
</form>

<div id="box"></div>
GlaryJoker
  • 29
  • 1
1

Try loading it first:

img.onload(function() {
    var w = img.width;
    var h = img.height;

    console.log("NEW IMAGE width", w);
    console.log("NEW IMAGE height: ", h);
});