在图像完全加载之前使用 Javascript 获取图像尺寸

Question

我读过有关在图像完全加载后获取图像尺寸的各种方法，但是一旦开始加载就可以获取任何图像的尺寸吗？

我还没有通过搜索找到太多相关信息（这让我相信这是不可能的），但事实是浏览器（在我的例子中是 Firefox）显示了我在标题中的新选项卡中打开的任何图像的尺寸它刚刚开始加载图像给了我希望，实际上有一种方法，我只是错过了正确的关键字来找到它。

Answer 1

你是对的，人们可以在图像完全加载之前获取图像尺寸。

这是一个解决方案（演示）：

var img = document.createElement('img');

img.src = 'some-image.jpg';

var poll = setInterval(function () {
    if (img.naturalWidth) {
        clearInterval(poll);
        console.log(img.naturalWidth, img.naturalHeight);
    }
}, 10);

img.onload = function () { console.log('Fully loaded'); }

Answer 2

以下代码在宽度/高度可用时立即返回。为了测试，将图像源中的 abc123 更改为任意随机字符串以防止缓存。

还有一个 JSFiddle 演示。

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

Answer 3

您可以使用 ResizeObserver 实现此目的，

new ResizeObserver((e, observer) => {
  img.remove();
  observer.disconnect();
  console.log(`${img.naturalWidth},${img.naturalHeight}`);
}).observe(img);
document.body.appendChild(img);

请参阅 https://codepen。 io/noamr/pen/NWOaqjp?editors=1111

Answer 4

一种方法是使用 HEAD 请求，它仅要求响应的 HTTP 标头。我知道在 HEAD 响应中，包括了身体的大小。但我不知道是否有任何可用于图像大小的东西。

Answer 5

在将图像附加到 DOM 之前，无法获取图像大小，除非您解码响应并检查图像元数据，如下所述： https://stackoverflow.com/a/74710020/7134134

一个更简单的替代方案是附加元素，获取所需的数据并立即删除它：

async function getImageDimentions(src: string) {  
  return new Promise(resolve => {
    const img = new Image();
    img.src = src;
    document.body.appendChild(img);
    img.onload = () => {
      img.remove();
      resolve({ width: img.naturalWidth, height: img.naturalHeight });
    };
  });
}

整个过程运行由于浏览器的工作方式而异步。

编辑：虽然没有太大区别，但 ResizeObserver 回调是在 onload 事件之前执行的，因此使用 ResizeObserver 可能会好一点。

async function getImageDimentions(src: string) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = src;
    new ResizeObserver((_e, observer) => {
      img.remove();
      observer.disconnect();
      if (img.naturalWidth) resolve({ width: img.naturalWidth, height: img.naturalHeight });
    }).observe(img);
    document.body.appendChild(img);
  });
}