等待 .onload 并检查多个图像的分辨率

Question

用户有一个按钮，他可以在其中添加多个图像。现在，我需要检查每个图像的分辨率，如果所有的分辨率都在 800x600 以上，那么我需要上传图像，否则会报错。

这需要看起来像这样：

prepareFilesList(files) {
  if (!this.verifyFilesResolution(files)) {
    this.selectedFiles = files; 
    this.uploadFiles();
  } else {
    return this.toastr.error('Image must be at least 800x600 .');
  }
 }

 verifyFilesResolution(files): boolean {
    let err = false;

    if (files && files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        let img = new Image();
  
        img.src = window.URL.createObjectURL(files[i]);
        img.onload = function () {

          if (img.width <= 800 || img.height <= 600) {
            err = true;
          }

        };
      }
    }

    return err;
  }

但是，在这种情况下，它不起作用，因为它不等待.onload，并且在所有情况下都会引发错误。不知何故，我需要等待.onload 并循环遍历所有文件或至少一个分辨率不高于 800x600 的文件。

我该怎么做？谢谢。

Answer 1

onload 函数被异步回调，因此您的所有循环在编写代码时所做的只是设置回调，它永远不会等待它们完成。你需要更多这样的东西（这是一个普遍的想法——我还没有测试过）：

prepareFilesList(files) {
  this.verifyFilesResolution(files, success => {
    if (success) {
      this.selectedFiles = files; 
      this.uploadFiles();
    } else {
      return this.toastr.error('Image must be at least 800x600 .');
    }
  });
}

 verifyFilesResolution(files, callback): boolean {
    let err = false;
    let imagesLoaded = 0;

    if (files && files.length > 0) {
      for (let i = 0; i < files.length; i++) {
        let img = new Image();
  
        img.src = window.URL.createObjectURL(files[i]);
        img.onload = function () {
          if (img.width <= 800 || img.height <= 600) {
            err = true;
          }

          if (++imagesLoaded === files.length) {
            callback(!err);
          }
        };
      }
    }

    return err;
  }

注意：您应该查看 onerror 并处理失败的图像加载。