确定反应 Material-ui CardMedia 的图像文件大小

Question

晚上好，

我在 React 功能组件中使用 material-ui Card，带有 CardMedia，例如：

<CardMedia
  className={classes.media}
  image={props.image}
  title={props.cardTitle}
/>

我正在尝试以字节为单位确定图像文件大小。经过一番研究，我找到了使用 XMLHttpRequest 的解决方案。再次下载文件对我来说似乎很奇怪。我找到了如何使用以下方法获取图像宽度和高度：

function checkImage() {
    var img = new Image();
    img.addEventListener("load", function(){
        console.log( this.naturalWidth +' '+ this.naturalHeight );
    });
    img.src = props.image;
}

它有效，但这不是我要找的，如果我没记错的话，它会再次下载图像。我查看了 Mozilla 文档，Image只有宽度和高度属性。由于图像已经加载，我应该有一种方法可以在不使用 XMLHttpRequest 的情况下以字节为单位确定其大小？

Answer 1

#1： 您可以通过如下请求获取Content-Length资源的标头：HEAD

fetch('https://your-domain/your-resource', { method: 'HEAD' })
  .then(r => console.log('size:', r.headers.get('Content-Length'), 'bytes'));

这样只下载标头，仅此而已。

#2：或者您可以使用资源计时 API：

const res = performance.getEntriesByName('https://your-domain/your-resource');
console.log(res[0].transferSize, res[0].encodedBodySize, res[0].decodedBodySize);

请注意，资源需要位于同一子域上，否则您必须添加Timing-Allow-OriginCORS 标头。

#3：另一种选择是将图像下载为 blob：

fetch('https://your-domain/your-resource')
  .then(r => r.blob())
  .then(b => console.log(b.size, URL.createObjectURL(b)));

如果在初始加载后调用，这当然会重新下载图像，但如果使用此方法初始加载图像，则可以使用对象 URL 来引用图像。