使用readAsDataURL加载图片后如何获取图片的宽高尺寸？

问题根因 #

• 原Promise逻辑错误：fileReader函数调用readAsDataURL后直接执行resolve()，此时FileReader尚未完成文件读取，img标签的src还未赋值，就已经进入then回调，此时读取宽高必然为0。
• 图片加载是异步操作：就算等待FileReader读取完成、给src赋值成功，也不代表图片已经被浏览器解析加载完成，只有img标签触发load事件后，才能拿到正确的宽高属性。

修复后完整代码 #

<script>
  var loadFile = function(event) {
    loadImageAndGetMeta(event.target.files[0]).then(({width, height}) => {
      console.log('Image width:' + width);
      console.log('Image height:' + height);
    }).catch(err => {
      console.error('图片加载失败：', err);
    });
  };
  
  function loadImageAndGetMeta(file){
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        const userUploadedImage = document.getElementById('userUploadedImage');
        
        // 提前监听图片加载完成事件
        userUploadedImage.onload = () => {
          resolve({
            width: userUploadedImage.width,
            height: userUploadedImage.height
          });
        };
        userUploadedImage.onerror = reject;

        reader.onload = function(){
          // 文件读取完成后给img赋值src
          userUploadedImage.src = reader.result;
        };
        reader.onerror = reject;

        reader.readAsDataURL(file);
      });
    }
</script>

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

调整说明 #

• 将文件读取、图片加载两步异步逻辑统一封装到Promise中，只有图片完全加载完成后才返回结果，保证读取的宽高为正确值
• 提前绑定img的load事件监听，避免src赋值速度过快导致漏听事件的边界问题
• 补充了异常捕获逻辑，处理文件读取、图片加载过程中可能出现的错误

内容的提问来源于stack exchange，提问作者transcend3nt