亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

確定反應 Material-ui CardMedia 的圖像文件大小

確定反應 Material-ui CardMedia 的圖像文件大小

偶然的你 2023-05-11 13:58:44
晚上好,我在 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 的情況下確定其字節大小嗎?
查看完整描述

1 回答

?
一只斗牛犬

TA貢獻1784條經驗 獲得超2個贊

#1:您可以通過如下請求 獲取Content-Length資源的標頭:HEAD


fetch('https://your-domain/your-resource', { method: 'HEAD' })

? .then(r => console.log('size:', r.headers.get('Content-Length'), 'bytes'));

這樣只下載標題,僅此而已。


#2:或者,您可以使用Resource Timing 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 來引用圖像。


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 168 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號