获取图像尺寸 [英] Getting an image dimensions

问题描述

我有一个获取图片尺寸的问题。我想知道图像的宽度和高度，而不需要将其加载到文档中。目前我的代码如下：

pre $ 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 =路径;
return d;





$ b

如果我调用该函数， ， H）。我试着不通过排除括号（8行）来调用onload处理程序，但我得到的是函数代码。

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

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

解决方案

此块

  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 将包含窗口的宽度和高度，因为这个会引用窗口。

您必须将函数分配给 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）{
 //用dim.width做一些事情，dim.height 
}）; 
  

---

查看我的答案在这里了解同步代码和异步代码的区别以及回调的作用。

I've got a problem with getting image dimensions. I want to know the width and height of image without its loading into document. At present I have code as follows:

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

If I call that function, I get object containing undefined in both index (w, h). I've tried not call onload handler by exclude parenthesis (8 line) but what I get is function code.

Note that if I call alert(w) inside onload handler body, I can see width of picture but outside it not.

Does someone know how to solve that problem? How can I get image dimension?

解决方案

This block

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

looks very fishy. This is actually executing the function immediately and assigning the object {width : w, height : h} to image.onload and d. w and h will contain the width and height of the window because this will refer to window.

You have to assign the function to image.onload, not execute it. The reason you have to assign the function is that it takes time to load the image and the callback gets called once the image was loaded. The whole process is asynchronous. That also means that you cannot return the dimensions of the image from getImageSize. You have to make it accept a callback, which you have to call in the load callback.

For example:

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

and call the function with

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

---

Have a look at the first part of my answer here to learn about the difference of synchronous and asynchronous code, and the role of callbacks.

这篇关于获取图像尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！