Javascript Image()获得自然的宽度和高度

Question

我有一个问题，如何通过Javascript加载图像(img)的naturalWidth和naturalHeight的值。

基本上我有这个代码片段:

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

我不知道问题是否将newImage.width的值传递给naturalWidth或其他任何东西。

如何解决这个问题?所以基本上我想这里的问题是如何提取newImage.width的值传递给naturalWidth。

Answer 1

问题是图像是异步加载的，onload在将来的某个时候会在alert()代码运行后被调用。您可以在onload处理程序中测试height和width，或者您可以从那里调用函数并将height和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;

或

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;

---

供参考，在图像元素上也有naturalHeight和naturalWidth属性(它们是图像的未缩放的高度和宽度)，您可能也会感兴趣。

Answer 2

Javascript是异步的，

alert在设置naturalWidth和naturalHeight之前被调用

试试这个,

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

你的警报在图片加载前被调用

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)

你可以检查工作小提琴

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

如果你想在函数外使用naturalWidth和naturalHeight值，那么我们必须轮询这些值来设置。

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

下面是更新后的代码