0

我在获取图像尺寸时遇到了问题。我想知道图像的宽度和高度而不将其加载到文档中。目前我的代码如下：

 function getImageSize (path) {
  var image = new Image();
  image.name = path;
  var d = image.onload = function() {
   var w = this.width;
   var h = this.height;
   return {width : w, height : h};
  }();
  image.src = path;
  return d;
 }

如果我调用该函数，我会得到两个索引（w，h）中包含未定义的对象。我试过不通过排除括号（8 行）调用 onload 处理程序，但我得到的是函数代码。

请注意，如果我alert(w)在 onload 处理程序主体内部调用，我可以看到图片的宽度，但在它外面看不到。

有人知道如何解决这个问题吗？如何获得图像尺寸？

4

2 回答 2

6

这块

var d = image.onload = function() {
   var w = this.width;
   var h = this.height;
   return {width : w, height : h};
}();

看起来很腥。这实际上是立即执行函数并将对象分配{width : w, height : h}给image.onloadand d。w并将包含窗口h的宽度和高度，因为将引用.thiswindow

您必须将功能分配给image.onload，而不是执行它。您必须分配该函数的原因是加载图像需要时间，并且一旦加载图像就会调用回调。整个过程是异步的。这也意味着您不能从getImageSize. 你必须让它接受一个回调，你必须在load回调中调用它。

例如：

function getImageSize (path, callback) {
  var image = new Image();
  image.name = path;
  image.onload = function() {
   callback({width : this.width, height : this.height};
  }
  image.src = path;
};

并调用函数

getImageSize('path/to/image', function(dim) {
    // do something with dim.width, dim.height
});

看看我这里回答的第一部分，了解同步和异步代码的区别，以及回调的作用。

于 2013-03-17T11:14:31.383 回答
0

onload是一个异步调用，不能从调用函数中返回任何有用的东西。

您将不得不使用全局变量和计时器检查来等待函数完成然后访问这些值。

于 2013-03-17T11:14:54.277 回答