Question

我有以下代码：

 var checkImgDim=new Image();
 checkImgDim.src=e.target.result;

 if (input.files[0].size > MAX_SIZE) 
    setError("File too large - max 3MB");

 else if (checkImgDim.naturalHeight < MIN_H ||
          checkImgDim.naturalWidth < MIN_W)
    setError("Image dimensions too small");

它在Chrome下工作正常然而使用Firefox我得到的结果不一致，因为似乎naturalHeight和naturalWidth有时返回0并且在设置值之前有一段延迟。我不想将图像加载到DOM中或使用.onload（）代码的全部目的只是检查图像尺寸。我不认为在这里添加时间延迟是一种好习惯。有人可以告诉我检查图像尺寸的正确方法吗？

Answer 1

在加载之前无法获取图像大小。无论如何，您应该使用图像的load事件。即使图像URL实际上是数据URI（例如，如果它来自FileReader），它也会异步“加载”到图像对象。

没有必要将图像作为HTML元素插入到DOM中。只需创建一个新的Image对象，向其添加一个load侦听器，然后设置其src属性。

var image = new Image;

image.onload = function() {
    alert(this.naturalHeight);
};

image.src = 'example.png';

如果之前已经下载过该图像，则不会再次下载该图像 - 将使用其缓存副本（只要未通过相应的服务器响应头有意禁用客户端缓存本身）。如果图像URL实际上是数据URI，则根本没有下载。

请注意，naturalWidth和naturalHeight属性相对较新，有些浏览器可能不支持它们。因此，使用常规width和height属性目前更可靠，只要它们的值之前未明确更改，它们就具有相同的值。

Answer 2

在没有ONLOAD的情况下编辑：

我认为你可以在使用0秒间隔加载之前获取图像尺寸 - 它会在调用onload之前在技术上返回尺寸，但是此解决方案确实使用了一个延迟，就像你说你想避免但是我想不出另一种做法。这种方式至少比onload更快。

var loaded = false;
var checkImgDim = new Image();

checkImgDim.onload = function () { loaded = true; };

var wait = setInterval(function () {
    if (loaded) {
        clearInterval(wait);
    } else {
        console.log(checkImgDim.naturalWidth, checkImgDim.naturalHeight);
    }
}, 0);

Firefox .naturalHeight属性

2 个答案: