JavaScript を使用して画像の幅と高さを取得するにはどうすればよいですか?

JavaScript を使用した画像の寸法の取得

Web ページ上の画像の寸法を確認する方法が必要ですか? JavaScript は、このタスクに対する簡単なソリューションを提供します。

画像サイズの取得

画像の寸法をプログラムで取得するには、次の JavaScript コードを利用します:

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

このスニペットでは、新しい Image オブジェクトが作成されます。 onload イベント リスナーは、読み込みが完了した画像を処理するために割り当てられます。次に、リスナーは、画像の寸法を表す画像オブジェクトの幅と高さのプロパティを取得します。

DOM イメージの場合

DOM にすでに存在する画像の場合、幅と高さに直接アクセスできますプロパティ:

const img = document.getElementById('my-image');
alert(img.offsetWidth + 'x' + img.offsetHeight);

考慮事項

このアプローチでは、サイズを取得する前に画像をロードする必要があることに注意してください。動的に読み込まれる画像やすぐに表示されない画像の場合は、プロパティにアクセスする前に画像が完全に読み込まれていることを確認する必要がある場合があります。

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