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

Posted 2023-03-28

【中文标题】使用 readAsDataURL 加载后如何检索图像尺寸？

【英文标题】：How to retrieve image dimensions after loading using 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"/>

【参考方案1】：

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

需要在.onload回调中调用。

【讨论】：

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