Javascript Image（）获得自然的宽度和高度

Question

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 .

Answer 1

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.

Answer 2

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;

Answer 3

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