関数はオブジェクトを返さなければなりませんが、未定義として返されます

Question

関数から返された画像の幅と高さを取得しようとしますが、未定義として返されるたびに、関数のconsole.log値毎回undefinedを返します。

私が疑う主な問題はスコープです。ネストされた関数なので、疑いがありますが、それは本当にわかりません。

JSコード

//get image width and height 
    $(document).ready(function(){ 
     //object method 
     function dimensions($width, $height){ 
     this.getWidth = $width; 
     this.getHeight = $height; 
     } 
     //gets image data 
     function readURL(input) { 
      var reader = new FileReader(); 
      var image = new Image(); 
      reader.onload = function (e) { 
      image.src = e.target.result; 
      } 
      reader.readAsDataURL(input.files[0]); 
      return image; 
     } 
     //gets image dimensions (width height) 
     function getImageDimensions($img){ 
     var $dimensions; 
      $img.onload = function(){ 
      $dimensions = new dimensions($img.width, $img.height); 
     } 
      return $dimensions; 
     } 

    $("#imgInp").change(function(){ 
    alert(getImageDimensions(readURL(this))); 
    }); 
    }); 

HTMLコード

<form id="form1" runat="server"> 
    <input type='file' id="imgInp" accept="image/*"/> 
    </form> 

それはオブジェクトを返しますが、undefinedを返していない理由を誰も私に説明できますか？

Answer 1

DOMにレンダリングされるまで画像の幅や高さがないためです。 インスタンス化をonloadハンドラに入れるのは正しいです。 問題は、画像が読み込まれたときにだけハンドラがトリガされますが、前に戻りラインを実行することです。私が$ IMG上でアラートを置けば

$img.onload = function(){ 
     return new dimensions($img.width, $img.height); 
     }