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

Question

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

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

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

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 函数中的尺寸进行任何操作。