一旦开始下载，如何使用JS获取图像元数据？

Question

一旦开始下载，我需要获取图像的高度和宽度。据我了解，图像的前几个字节包含其元数据，因此浏览器知道如何正确绘制图像的“框架”（即适当的尺寸）。

在开始下载图像时，是否有某些事件可能会通知我，并允许我“提取”高度和宽度？假设与“ load”事件相对应。

我尝试了MutationObserver，但未产生任何结果，并且似乎与该问题无关。

Answer 1

无法将Javascript附加到由浏览器处理图像产生的事件。我本来希望拥有此功能。如果需要在下载完成之前获取图像的高度和宽度，则必须自己完成操作。

有关入门方法，请参见the Streams API和fetching with streams，但请注意，这仅在现代浏览器中有效。

我不确定您的用例是什么，但是如果您想要早期的元数据，则可以获取每个图像，检查该元数据，然后将该图像作为Blob URL传递到页面上。