获取图像尺寸答案

【问题标题】：Getting an image dimensions获取图像尺寸
【发布时间】：2013-03-17 11:01:05
【问题描述】：

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

 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 处理程序，但我得到的是函数代码。

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

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

【问题讨论】：

标签： javascript image function dimensions

【解决方案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的第一部分，了解同步和异步代码的区别，以及回调的作用。

【讨论】：

正如我所说，您不能返回尺寸。引用我自己的话：“这也意味着你不能从getImageSize返回图像的尺寸”。所有需要访问维度的代码都必须从回调中调用或调用。

【解决方案2】：

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

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

【讨论】：