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