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

Question

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

尝试 #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"/>

Answer 1

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

需要在.onload回调中调用。

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

How to retrieve image dimensions after loading using readAsDataURL?

javascript

jquery

image

file

reader