web-dev-qa-db-ja.com

JavaScript-HTML img srcからバイト単位でサイズを取得する

HTML/JSで「img」タグから「src」からバイト単位でサイズを取得する方法を教えてください。

<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/>

上記の例では、「testpattern.gif」の大きさ（バイト単位）を基本的に知りたいと思います。

前もって感謝します。

javascripthtmlbytesrc
11
user4532193

これは2017年で、Resource Timing APIを使用して、JavaScript内で画像のtransferSize、encodedBodySize、decodedBodySizeを抽出できます。

以下は、ページ上の画像のallimgのサイズ情報にアクセスするためのコードです（以下のすべての警告を参照）。

var imgElems = document.getElementsByTagName('img');
for ( var i=0, len = imgElems.length; i < len; i++ ) 
{
    var url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        var iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}
  • ドキュメントのロード後に上記のコードを実行していることを確認してください（画像がロードされていることを確認してください）
  • CORSが原因で、異なるドメインからの画像のタイミング情報が利用できない場合があります（異なるドメインのサーバーがTiming-Allow-Origin HTTP応答ヘッダーを設定していない場合）
  • 対象のブラウザでリソースタイミングAPIが利用可能であることを確認してください： http://caniuse.com/#feat=resource-timing
  • TransferSize、encodedBodySize、decodedBodySizeの違いを理解して、正しいサイズ属性を使用していることを確認してください。
16
Punit S