使用JavaScript无法获取正确图片尺寸的问题排查

你猜的完全正确！问题的核心就是图片还没完全加载完成，你就尝试读取它的尺寸了，再加上代码里还有一个小误区，才导致返回的数值完全不对。

问题分析 #

1. 错误的this指向：在reader.onload回调里，this指向的是FileReader实例，不是图片元素，所以this.width和this.height根本不是图片的尺寸，用这个值去设置图片的宽高完全是错的。
2. 图片加载时机不对：reader.onload只是把图片的DataURL赋值给了img的src，但图片实际加载到浏览器还需要时间。这时候你立刻去取$("#imageDisplay").width()，得到的只是img元素的初始默认宽度（比如浏览器默认的16px），不同浏览器的默认样式不一样，所以结果也不同。

修正后的代码 #

把你的script.js改成下面这样，就能正确获取图片的原始宽高了：

function readURL(input) {
  // 先判断是否有选中文件
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    // 缓存图片元素，避免重复查询DOM
    var $imgDisplay = $('#imageDisplay');

    reader.onload = function (e) {
      // 给图片设置数据源
      $imgDisplay.attr('src', e.target.result);
    };

    // 监听图片的load事件——只有当图片完全加载完成后才执行回调
    $imgDisplay.on('load', function() {
      // 获取图片的原始宽高（naturalWidth/naturalHeight是图片文件本身的尺寸，不受CSS影响）
      var originalWidth = this.naturalWidth;
      var originalHeight = this.naturalHeight;

      // 如果需要让图片按原始尺寸显示，可以打开下面这行注释
      // $imgDisplay.width(originalWidth).height(originalHeight);

      // 更新尺寸显示（用text覆盖原有内容，避免多次追加）
      $("#imageSize").text(`Bilden är: ${originalWidth}px x ${originalHeight}px`);
    });

    reader.readAsDataURL(input.files[0]);
  }
}

关键说明 #

• load事件监听：这是确保图片加载完成的核心，只有触发load事件后，图片的真实尺寸才会被浏览器解析出来。
• naturalWidth/naturalHeight：这两个属性返回的是图片文件本身的原始宽高，不会被CSS样式、img的width/height属性影响，是获取图片真实尺寸最可靠的方式。
• 避免重复DOM操作：缓存$('#imageDisplay')为变量，减少重复查询DOM的开销。
• 重置显示文本：用text()代替append()，避免每次选择图片时都在原有内容后面追加新尺寸。

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