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

JavaScript による画像ファイルのサイズと寸法の決定

この記事では、ファイル サイズ (キロバイト単位) を決定する方法と、 JavaScript を使用して、ブラウザーのコンテキスト内で直接画像の解像度を設定します。この情報は、Web ページに表示したり、さまざまな操作を実行したりする場合に役立ちます。

ピクセル寸法の取得

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

ファイル サイズの取得

サーバーでホストされるファイルのサイズは、Ajax HEAD HTTP リクエストを通じて取得できます。このメソッドは、ファイルのコンテンツを転送せずに HTTP ヘッダーを取得します。 Content-Length ヘッダーは、ファイルのサイズをバイト単位で示します。

注: このアプローチは、同じドメインへのリクエストを制限する同一生成元ポリシーの対象となります。

元の画像の寸法の取得

画像の元の寸法を決定するには、HTML 画像要素を動的に作成します。画像のロード後に幅と高さのプロパティにアクセスするには、onload イベントを設定します。

コード例:

• ピクセル寸法:

  var img = document.getElementById('imageId');
  
  var width = img.clientWidth;
  var height = img.clientHeight;

• HEAD リクエストを使用したファイル サイズ:

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

• 元の画像のサイズ:

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