javascript - 如何从此函数调用返回值？

Question

我有一个获取图像尺寸的函数。我发送来自 createObjectURL 的返回值。

它可以很好地获取尺寸，但我无法取回值。我试图获取这两个值，但问题似乎是函数内有一个函数。并且外部函数不知道内部函数中设置的值。当我硬编码一个值时，如下面的“qq”所示，就可以了。所以我可以看到问题不在于返回，而在于值(value)观。

在这种情况下你如何读取这些值？

imgSrc = window.URL.createObjectURL(this.files[0]);

var imgSize = getImgSize(imgSrc);
var newWidth = imgSize.retWidth;
var newHeight = imgSize.retHeight;

alert(newWidth);
alert(newHeight);

function getImgSize(imgSrc) {
  var newImg = new Image();

  newImg.onload = function() {
    var nHeight = newImg.height;
    var nWidth = newImg.width;

    //alert('The image size is ' + width + '*' + height);
  }

  newImg.src = imgSrc; //this must be done AFTER setting onload

  return {
    retWidth: nWidth,
    retHeight: 'qq'
  };
}

Answer 1

您无法取回它们，因为 .onload 是异步的，处理此问题的最简单方法是从加载处理程序内部调用函数。

function getImage(){
  var imgSrc = window.URL.createObjectURL(this.files[0]);
  getImgSize(imgSrc,useImgSize);
}

function getImgSize(src,fn){
  var img=new Image();
  img.onload=function(){
    fn({width:img.width,height:img.height});
  }
  img.src=src;
}

function useImgSize(dimensions){
  alert(dimensions.width);
  alert(dimensions.height);
}

在这里，我为该过程的每个步骤使用一个函数。你已经让 getImage 开始了这个过程。然后，您调用一个实用程序函数，该函数将图像源和回调函数作为参数(您可以直接调用 useImgSize 函数，但回调允许您将实用程序函数用于多种用途)。最后，您可以在 useImgSize 函数中对尺寸进行任何您想要的操作。