使用javascript获取图像标签内的图像大小（不是尺寸）

Question

我有一个<img> 标记，其中填充了动态src 属性。我想在使用 javascript/jQuery 加载图像时显示图像大小（以字节为单位）。

我尝试使用以下内容。但是，它在所有 3 个属性中都返回零。

$('#img').on('load',
                function() {
                    var imgUrl = $(this).attr("src");
                    var imgPerf = performance.getEntriesByName(imgUrl)[0];
                    console.log(Math.round(imgPerf.decodedBodySize)); // returns 0
                    console.log(Math.round(imgPerf.encodedBodySize)); // returns 0
                    console.log(Math.round(imgPerf.transferSize)); // returns 0
                });

还有其他可能的方法来获取图像大小值吗？

仅供参考，图片是从不同的域加载的。

Answer 1

如果你有图片网址，你可以试试这个：

const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());

这将通过 HTTP 获取资源，然后将完整的二进制文件作为 blob 对象返回，然后您可以访问其属性，包括其大小（以字节为单位）：

fileImg.size