HTML5 - 如何获取图像尺寸

Question

我有这样一个脚本，它用于获取浏览器上传图片的宽度和高度。

参考链接：http://renevier.net/misc/resizeimg.html

function createReader(file) {
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            alert (width); // will produce something like 198
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);
}

for (var i = 0, length = input.files.length; i < length; i++) {
    createReader(input.files[i]);
}

我想从createReader函数外部访问宽度和高度的值。我该怎么做？

- angry kiwi

---

嗯...让createReader返回一些东西。这是一个好的开始。 - Brian Driscoll

变量width和height只能在image.onload函数内部访问，这就是为什么我无法“return something”的原因。 - angry kiwi

你不能在想要返回它们的作用域中创建变量width和height，比如createReader函数吗？ - Victor Zamanian

@victor：你能否再解释一下或者举个例子？ - angry kiwi

@Victor，那样做是行不通的... - Pointy

@runrunforest 不，算了。正如Pointy指出的那样，那行不通。 - Victor Zamanian

Answer 1

修改"createReader"函数，传入一个处理函数，在图片可用时调用该函数：

function createReader(file, whenReady) {
    reader.onload = function(evt) {
        var image = new Image();
        image.onload = function(evt) {
            var width = this.width;
            var height = this.height;
            if (whenReady) whenReady(width, height);
        };
        image.src = evt.target.result; 
    };
    reader.readAsDataURL(file);
}

现在当你调用它时，你可以传入一个函数来处理图像尺寸的任何操作：

  createReader(input.files[i], function(w, h) {
    alert("Hi the width is " + w + " and the height is " + h);
  });

- Pointy

---

太棒了！如果我可以给10个赞，我一定会的！！whenReady对我帮助很大，因为我不知道为什么有时候获取高度可以，有时候又不行。请问何时需要使用whenReady类型处理程序？为什么使用File API读取文件需要它呢？ - Kim Stacks

@kimsia，像那样的许多API都是异步的——当您调用它们时，会启动一系列事件，但并不会立即发生所有事情。 "回调"机制允许您放置代码，以在长期操作完成时运行。网络操作，文件系统交互和其他类似内容都是异步的，因为这些东西涉及不立即发生的硬件现实。 - Pointy