javascript - 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';

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

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