JavaScript を使用して画像のファイル サイズと寸法を確認するにはどうすればよいですか?

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

Web アプリケーションでは、Web ページに表示される画像に関する情報を取得する必要があります。一般的な要件の 1 つは、画像のファイル サイズと解像度を完全にブラウザーのコンテキスト内で決定することです。この記事では、このタスクを達成するためのさまざまなクロスブラウザー手法について説明します。

画像のサイズを取得する

Web ページに表示される画像の解像度を決定するには、以下を利用できます。画像を含む DOM 要素の clientWidth プロパティと clientHeight プロパティ。この方法では、境界線や余白を除いた、ブラウザ内の画像のピクセル寸法が返されます。

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

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

ファイル サイズの取得

ファイル サイズを取得するには画像の場合、オプションの 1 つは、Internet Explorer でドキュメントおよび IMG 要素に使用できる fileSize プロパティを使用することです。ただし、このアプローチは IE に限定されており、他のブラウザではサポートされていません。

HEAD HTTP リクエストの使用

より汎用性の高い手法は、HTTP HEAD リクエストを画像のURL。 HEAD リクエストは、コンテンツをダウンロードせずに、リソースに関するメタデータを取得します。応答ヘッダーには、ファイル サイズをバイト単位で表す 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);

注: Ajax リクエストは同一生成元ポリシーの対象となり、リソースのみにアクセスできることを意味します。 Web ページと同じドメインから。

元の画像を取得しています寸法

サイズ変更またはトリミングする前に画像の元の寸法を決定するには、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 サイトの他の関連記事を参照してください。