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函数外部访问该值宽度和高度。我怎样才能做到这一点？

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