CODEWITHSUNDEEP
javascript
David B
David B

Reputation: 3571

Javascript Image() getting natural width and height

I have a problem on how I could extract the value(s) of an image(img)'s naturalWidth and naturalHeight upon loading it via Javascript.

Basically I have this code snippet:

var newImage = new Image(),
    naturalWidth = 0,
    naturalHeight = 0;
newImage.onload = function() {
    naturalWidth = newImage.width;
    naturalHeight = newImage.height;
}
newImage.src = imageObject.imageArea.filename;
alert("Image Size: " + naturalWidth + "x"+  naturalHeight);

I don't know if the problem is passing the value of newImage.width to naturalWidth or whatsoever.

How can this be resolved? So basically I wanted to the problem here is how to extract the values of newImage.width to pass it to naturalWidth.

Upvotes: 0

Views: 800

Answers (3)

jfriend00
jfriend00

Reputation: 707238

The problem is that the image loads asynchronously and onload is called sometime in the future AFTER your alert() code runs. You can test the height and width inside the onload handler or you can call a function from there and pass it the height and width:

var newImage = new Image(),
newImage.onload = function() {
    var naturalWidth = newImage.width;
    var naturalHeight = newImage.height;
    // use the height and width here
    alert("Image Size: " + naturalWidth + "x"+  naturalHeight);
}
newImage.src = imageObject.imageArea.filename;

OR

var newImage = new Image(),
newImage.onload = function() {
    // pass the height and width in a function call
    callMyFunc(newImage.width, newImage.height);
}
newImage.src = imageObject.imageArea.filename;

FYI, there are also naturalHeight and naturalWidth properties (which are the unscaled height and width of the image) on the image element that you may also be interested in.

Upvotes: 1

Sandeeproop
Sandeeproop

Reputation: 1776

Your alert is called before your image is loaded

var newImage = new Image(),
    naturalWidth = 0,
    naturalHeight = 0;
if (newImage.addEventListener) {
  newImage.addEventListener('load', function() {
    alert("load complete")
   naturalWidth = newImage.width;
   naturalHeight = newImage.height;

  });
} else {
  // it's IE!
  newImage.attachEvent('onload', function() {
    naturalWidth = newImage.width;
    naturalHeight = newImage.height;
  });
}

newImage.src = "http://fc05.deviantart.net/fs70/f/2010/020/f/0/Black_Twitter_icons_by_iconhive.jpg";
 document.getElementById("img_cont").appendChild(newImage)

You can check the working fiddle

====================================

if you want to use naturalWidth and naturalHeight valus out side the function then we have to poll for those values to be set.

var timer = setInterval(function(){
  if(naturalWidth !=0) {
   clearInterval(timer);
   alert("Image Size: " + naturalWidth + "x"+  naturalHeight);
  }
},100);

Here is the updated fiddle for the updated code

Upvotes: 0

Jashwant
Jashwant

Reputation: 28995

Javascript is asynchronous,

alert gets called before you set naturalWidth and naturalHeight

Try this,

var newImage = new Image(),
    naturalWidth = 0,
    naturalHeight = 0;
newImage.onload = function() {
    naturalWidth = newImage.width;
    naturalHeight = newImage.height;
    alert("Image Size: " + naturalWidth + "x"+  naturalHeight);
}
newImage.src = imageObject.imageArea.filename;

Upvotes: 0

Related Questions