Can't get height and width of image in javascript

Question

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.

jilykate · Accepted Answer · 2016-01-20 06:28:10Z

19

you should get size after image loaded:

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

edited Jan 20, 2016 at 6:28

answered Jan 19, 2016 at 9:35

jilykate

6,0382 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noa-dev Over a year ago

img.onload is not a function is what i get

jilykate Over a year ago

please see the demo screen shot I attached later.

Nofi · Accepted Answer · 2016-01-20 06:03:35Z

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);
    }

edited Jan 20, 2016 at 6:03

answered Jan 19, 2016 at 9:37

Nofi

2,1952 gold badges17 silver badges23 bronze badges

3 Comments

noa-dev Over a year ago

It says "img.onload is not a function"

Nofi Over a year ago

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 Over a year ago

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 "jsfiddle.net/Nofiden/vz844evq" ...After loading the full picture you will get an alert showing width and height.

GlaryJoker · Accepted Answer · 2017-09-01 03:57:07Z

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>

user5224574 · Accepted Answer · 2016-01-19 09:30:58Z

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);
});

answered Jan 19, 2016 at 9:30

user5224574

1 Comment

noa-dev Over a year ago

img.onload is not a function is what i get

Collectives™ on Stack Overflow

Can't get height and width of image in javascript

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related