JavaScript を使用して画像ファイルのサイズと寸法を取得する方法

JavaScript を使用して画像のファイル サイズと寸法を決定する

質問:

どうすればできますかJavaScript のみを使用して Web ページ上にレンダリングされる画像のファイル サイズ (KB 単位) と解像度を決定します。ブラウザ間の互換性のある方法?

答え:

ピクセル寸法の取得:

現在のブラウザ内ピクセルを取得するには境界線とマージンを除いた画像要素のサイズには、次の値を使用します。 JavaScript:

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

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

ファイル サイズの取得:

• オプション 1: HEAD HTTP リクエスト (推奨)

次を使用して、イメージをホストしているサーバーに HEAD リクエストを送信します。 XMLHTTPリクエスト。 HTTP 応答の Content-Length ヘッダーには、バイト単位のファイル サイズが含まれます。

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);

• オプション 2: 要素ファイル サイズ プロパティ (IE のみ)

この方法はインターネットでのみ適用できますExplorer:

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

元の画像の寸法の取得:

IMG 要素をプログラムで作成し、その onload イベントを使用して元の画像の寸法を取得します:

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 サイトの他の関連記事を参照してください。