javascript - html5 img 有 `loadedmetadata` 吗？

Question

我正在渲染由浏览器本地流式传输的大图像。

我需要的是一个 Javascript 事件，它表明图像的尺寸是从其元数据中检索到的。唯一似乎正在触发的事件是 onload事件，但这没有用，因为在此之前很久就知道尺寸了。我试过 loadstart 但它不会触发 img 元素。

有没有loadedmetadata img 的事件html5中的元素？

Answer 1

没有 loadedmetadata 的等价物对于 img元素。

撰写本文时最新的规范是 w3 Recommendation (5.2) (或 w3 WD (5.3) )和 WHATWG Living Standard .虽然我发现浏览所有 events in MDN 更容易;他们的文档对用户更友好。

您可以查看 loadedmetadata是唯一与元数据相关的事件，它仅适用于 HTMLMediaElements。

您可以利用 Streams API访问数据流，处理它们并自己提取元数据。但是，它有两个警告:它是一项支持有限的实验性技术，您需要寻找一种方法来根据图像格式从数据流中读取图像尺寸。

我整理了一个基于 MDN docs 的 PNG 图像示例.

关注 PNG spec ，PNG 图像的尺寸就在签名之后，在 IHDR block 的开头(即，字节 16-19 的宽度，20-23 的高度)。尽管不能保证，但您可以打赌，每种图像格式的元数据都在您收到的第一个 block 中可用。

const image = document.getElementById('img');

// Fetch the original image
fetch('https://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png')
  // Retrieve its body as ReadableStream
  .then(response => {
    const reader = response.body.getReader();
    return stream = new ReadableStream({
      start(controller) {
        let firstChunkReceived = false;
        return pump();

        function pump() {
          return reader.read().then(({
            done,
            value
          }) => {
            // When no more data needs to be consumed, close the stream
            if (done) {
              controller.close();
              return;
            }
            // Log the chunk of data in console
            console.log('data chunk: [' + value + ']');
            // Retrieve the metadata from the first chunk
            if (!firstChunkReceived) {
              firstChunkReceived = true;
              let width = (new DataView(value.buffer, 16, 20)).getInt32();
              let height = (new DataView(value.buffer, 20, 24)).getInt32();
              console.log('width: ' + width + '; height: ' + height);
            }
            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
            return pump();
          });
        }
      }
    })
  }).then(stream => new Response(stream))
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => console.log(image.src = url))
  .catch(err => console.error(err));

<img id="img" src="" alt="Image preview...">

免责声明 :当我读到这个问题时，我知道可以使用 Streams API，但我从来没有需要提取元数据，所以我从来没有对它进行过任何研究。可能还有其他 API 或库可以做得更好、更直接并且具有更广泛的浏览器支持。