JavaScript で画像ファイルのサイズと寸法を取得するにはどうすればよいですか?

JavaScript での画像ファイルのサイズと寸法の決定

Web アプリケーションでは、画像のファイル サイズ (kb 単位) と解像度を直接決定します。ブラウザーのコンテキストは、この情報をページに表示するなど、さまざまな目的に不可欠です。この記事では、ActiveX コントロールや Java アプレットに依存せずにこのクロスブラウザ機能を実現するソリューションについて説明します。

画像サイズの取得

画像要素のピクセル サイズを取得するにはブラウザ内では、境界線とマージンを除いて、clientWidth プロパティと clientHeight プロパティを利用できます。

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

ファイル サイズの決定

残念ながら、ブラウザ API には直接サポートがありません。画像のファイルサイズにアクセスします。ただし、回避策としては、Ajax を使用して HEAD HTTP リクエストを作成する必要があります:

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

注: このメソッドは同一オリジン ポリシーの対象となり、同じドメイン内でのみリクエストを許可します。

追加の考慮事項

• 応答が圧縮されている (gzip など) 場合、Content-Length ヘッダーの値は実際の画像サイズを正確に反映していない可能性があります。
• 画像をドキュメントに完全にロードせずに元の画像の寸法を取得するには、プログラムで画像要素を作成し、画像ソースを割り当てます:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src='http://sstatic.net/so/img/logo.png';

以上がJavaScript で画像ファイルのサイズと寸法を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。