Question

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

 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）中得到包含undefined的对象。我试过不通过排除括号（8行）调用onload处理程序，但我得到的是函数代码。

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

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

Answer 1

此块

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

看起来非常腥。这实际上是执行立即功能，并将对象{width : w, height : h}分配给image.onload和d。 w和h将包含窗口的宽度和高度，因为this将引用window。

您必须将功能分配给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
});

查看my answer here的第一部分，了解同步和异步代码的区别以及回调的作用。

Answer 2

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

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

获取图像尺寸

2 个答案: