Firefox .naturalHeight 属性

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 实际上是 Data URI，则根本没有下载。

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

Answer 2

在没有加载的情况下编辑：

我认为您可以使用 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);