如何使用 javascript 从文件中获取图像尺寸（高度、宽度）答案

【问题标题】：How do i get the image dimensions (height, width) from a file by using javascript如何使用 javascript 从文件中获取图像尺寸（高度、宽度）
【发布时间】：2013-07-16 12:06:16
【问题描述】：

我可能非常非常愚蠢。但我不能让它为我的生活工作。我正在尝试将imgWidth 设置为与文件的图像宽度（pic_real_width）相同的宽度。

function calculate() {
    var pic_real_width, pic_real_height;
    $("<img/>").attr("src", $("#pp_photo_popUp")[0].src).load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });
    var imgWidth = 
}

总而言之，我正在尝试制作一个函数来获取硬盘上文件的真实尺寸。

【问题讨论】：

这不是范围问题，而是时间问题。 var imageWidth = 发生在 pic_real_width = this.width 之前
load 调用 ajax，这是异步的。您想对加载的图像执行的任何操作都必须在回调中完成。
@roasted 它使用 onload 事件而不是 ajax，但它是异步的（除非缓存）
@dandavis 他正在使用图像加载回调。
?@KevinB：我不同意。如果相同的代码每次不做同样的事情，它就会被破坏。

标签： javascript jquery image

【解决方案1】：

先绑定加载事件，然后在加载事件里面做所有需要加载图片的处理。

function calculate(callback) {
    $("<img/>").load(function() {
        var pic_real_width = this.width;   // Note: $(this).width() will not
        var pic_real_height = this.height; // work for in memory images.
        callback(pic_real_width,pic_real_height);
    }).attr("src", $("#pp_photo_popUp")[0].src);
}

calculate(function(width,height) {
    console.log(width,height);
});

如果你先设置了src，某些版本的IE会立即同步触发load事件，从而在你绑定之前就触发了。这就是我交换订单的原因。此外，我添加了回调参数，因为我假设稍后在函数中您将返回宽度/高度，由于加载事件的异步性质，这将不起作用。

【讨论】：

您确定它只是“某些版本的 IE”吗？我认为是所有浏览器...如果图像被缓存，则在设置src 时会立即触发load 事件。不过，我从来没有真正需要测试过这个（尤其是在所有浏览器中）
可能是所有版本的IE，但是有些浏览器在缓存的时候确实会异步触发事件，这意味着设置src后绑定事件在那些浏览器中即使在缓存的图像上也能正常工作。我不确定浏览器的当前版本，我对此进行的所有测试都是一年前，IE 是唯一同步触发它的浏览器。
@KevinB 有点救了我的命，谢谢，我应该想到这是一个异步函数。不过，这过程的密集程度如何？我的意思是，如果我每次用户切换到下一张照片时都调用它，那可以吗？