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()。您可以在height处理程序中测试width和onload，也可以从那里调用函数并将其传递给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;

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;

仅供参考，您可能还感兴趣的图像元素上还有naturalHeight和naturalWidth属性（图像的未缩放高度和宽度）。

Answer 2

Javascript是异步的，

在设置alert和naturalWidth

之前，会先调用{p> 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)

您可以查看工作fiddle

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

如果你想在函数旁边使用naturalWidth和naturalHeight valus，那么我们必须轮询那些要设置的值。

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

以下是更新后代码的更新fiddle

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

3 个答案: