使用 readAsDataURL 加载后如何检索图像尺寸？答案

【问题标题】：How to retrieve image dimensions after loading using readAsDataURL?使用 readAsDataURL 加载后如何检索图像尺寸？
【发布时间】：2021-11-25 22:22:00
【问题描述】：

我正在尝试创建一个非常简单的图像预览功能，允许用户选择本地图像文件并将其显示在客户端浏览器上。然后，我想检索并显示我无法执行的图像尺寸（高度、宽度）。

尝试 #1 在调用readAsDataURL 后，我尝试立即检索图像的尺寸 - 但我失败了，因为在我读取尺寸之前图像似乎没有呈现在屏幕上。

尝试 #2 因此，我尝试使用 Promises 使函数调用序列同步。我希望在屏幕上呈现图像尺寸后读取它。不幸的是，它仍然不成功。

任何帮助将不胜感激。您可以从字面上复制下面的代码并将其粘贴到 HTML 文件中，然后查看它是否有效。谢谢。

<script>
  var loadFile = function(event) {
    var promise = fileReader(event.target.files[0]);
    promise.then(
        () => {
            var userUploadedImage = document.getElementById('userUploadedImage');
            console.log('Image width:' + userUploadedImage.width); // problem: always appearing 0
            console.log('Image height:' + userUploadedImage.height); // problem: appearing 0
        }
    );
  };
  
  function fileReader(file){
      return new Promise((resolve, reject) => {
        var reader = new FileReader();  
        reader.onload = function(){
          var userUploadedImage = document.getElementById('userUploadedImage');
          userUploadedImage.src = reader.result;
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
        resolve();
      });
    }
</script>

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="userUploadedImage"/>

【问题讨论】：

标签： javascript jquery image file reader

【解决方案1】：

您调用resolve 太早，没有等待图像加载。

需要在.onload回调中调用。

【讨论】：

非常感谢，你说得对。这解决了我的问题