Javascript 重复使用FileReader时宽度和高度错误

我目前正在开发一个简单的界面，允许用户上传图片，预览图片，然后将其裁剪成正方形

我使用FileReader获得图像的预览，并使用jCrop进行裁剪

下面是我正在使用的代码（它的一部分）：

我认为唯一重要的部分是我计算宽度和高度时的部分

为了说明这个问题，我上传了：

1/图1（600x450）

2/图2（94x125）

3/图1（600x450）

第一次上传很好，第二次也很好，但我想这比其他东西更幸运，因为高度被错误地计算为0。 第三次上载不起作用（大小设置不正确）

这意味着cropzone未正确显示

关于css，我有以下几点：

#upload-picture-sample{
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  max-height:125px;
  height:auto;
  width:auto;
  max-width:300px;
}

你知道我怎样才能解决我的问题吗

更新：按照@initialxy的建议添加

setTimeout

后

因此，它要好得多，但第一张图像的尺寸与最后一张图像的尺寸并不相同（而且应该如此，因为它是完全相同的图像）

---

谢谢。

你所有的数字看起来都不一致。在第一幅图中，宽度最后是167，而jQuery是167。需要注意的一点是，jQuery获取的是设置所需宽度和高度的DOM属性，

img.width

和

img.height

。（仅供参考还有

naturalWidth

和

naturalHeight

，它们是只读的DOM属性，可以获取

img

的原始维度）

这比什么都幸运

如果你的代码依赖运气，那么我们就有问题了

看起来浏览器发出load事件有点太早了，这样布局引擎还没有完成DOM的更新<代码>加载只意味着加载了数据，并不一定意味着必须完成布局引擎。因此，稍后在任务队列中尝试将代码块排队到加载函数中。我的意思是将所有这些都包装在一个

setTimeout（…，0）中注意
此
，因为它已更改

例如

编辑：响应@Vico的更新。看来布局引擎这次已经解决了。让我们对这些数字进行一些观察。第一幅图像的尺寸最初为600x450，但最终为167x125。这是有意义的，因为它的大小调整为
max height:125pxCSS属性。第二个图像的尺寸都小于
max width
和
max height
，因此没有调整大小。第三幅图像的尺寸为600x450，它最终具有这些尺寸，因此此时
max width
和
max height
不再生效。为什么呢？也许jcrop在风格上做了手脚，凌驾于你的风格之上。启动Chrome调试器，检查
img
元素，并使用其JavaScript控制台对其进行处理。（给你一个简短的回答，是的，jcrop确实会改变样式，并将内联样式应用于元素，这会覆盖你的样式。但是，嘿，使用调试器更有趣。）此外，我不确定为什么右边的维度都以1440x514结束。您可以通过在debugger中转转找到答案。
有关更多信息，我建议所有潜在读者查看此问题：

解决方法很好。
非常感谢您的回答@initialxy，我已经更新了我的帖子以显示新的结果。尽管如此，我仍然有一个奇怪的结果为最后上传。有什么线索吗？谢谢@initialxy的更新。奇怪的是，这些图像的大小是正确的。jcrop一个，和原始一个（上传图片样本）。当我和检查员核对时，一切似乎都很好。否则宽度和高度值就错了，否则在应用css之前我会得到它们的大小。@Vico您使用相同的元素来测量图像大小以及让jcrop使用它。jscrop将一系列内联样式应用于它。打开调试器并在inspector中选择原始的
img
。（现在在JavaScript控制台中，您可以方便地使用
$0
引用它。）您看到了什么？类似于
的东西，不是吗？注意
style
属性有很多不需要的值吗？是的，我看到了。但事实上，这些值是正确的：“显示：无；可见性：隐藏；宽度：167px；高度：125px”；这些值由jcrop添加，它们覆盖CSS的行为。他们把你的宽度和高度都搞砸了。
#upload-picture-sample{
  display:block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  max-height:125px;
  height:auto;
  width:auto;
  max-width:300px;
}

$('#upload-picture-sample').attr('src', e.target.result).load(function(){
    var img = this;

    setTimeout(function() {
        var imageWidth = img.width;
        var imageHeight = img.height;

        console.log(img.width+'-- WIDTH --'+$(img).width());
        console.log(img.height+'-- HEIGHT --'+$(img).height());

        // TODO: Crop
        ...
    }, 0);

    $(this).unbind('load');
});