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

Question

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

它在获取尺寸方面工作正常，但我无法取回值。我试图获得这两个值，但问题似乎是函数中有一个函数。并且外部函数不知道内部函数中设置的值。当我硬编码一个值时，就像下面的“qq”一样。所以我可以看出问题不在返回中，而在值(value)中。

在这种情况下，您如何解读值(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 函数中对尺寸做任何您想做的事情。