Question

我尝试从函数返回图像宽度和高度，但每次它都以未定义的形式返回时，如果我显示的函数中有console.log值，但每次都返回undefined。 / p>

我怀疑的主要问题是范围，因为它是一个嵌套函数，但我不确定，如果是这样的话。

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中呈现之前没有宽度或高度。所以你将instanciation放在onload处理程序中是正确的。问题是处理程序仅在您的图像加载时触发，但您之前执行返回行。换句话说，你执行这一行

return $dimensions;

此功能之前

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

将回报放在$ img.onload中，如下所示：

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

函数应返回对象，但它返回为未定义

1 个答案: