ブラウザ間でクライアント側でサイズ変更された画像の元のサイズを明らかにする

クライアントでサイズ変更された画像の実際のサイズを確認するサイドは、多くの Web 開発シナリオにとって重要なタスクです。レスポンシブなレイアウトに合わせて画像を調整する場合でも、元のサイズをユーザーに表示する場合でも、ブラウザ間で一貫して機能する信頼性の高いソリューションを見つけることが重要です。

オプション 1: OffsetWidth と OffsetHeight を解放する

1 つの方法では、 要素から幅と高さの属性を削除し、その offsetWidth と offsetHeight を取得します。この手法により、CSS スタイルが元のサイズをオーバーライドする可能性が排除されます。

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

オプション 2: JavaScript 画像オブジェクトの利用

別の方法では、JavaScript 画像オブジェクトを利用します。 Image オブジェクトを作成し、その src プロパティに画像ソースを割り当て、画像が読み込まれた後にその幅と高さのプロパティに直接アクセスします。 newImg.onload = function() { const width = newImg.width; const height = newImg.height; // デモンストレーション用にアラートにディメンションを表示します alert(`元の画像サイズ: ${width}px * ${height}px`); }; newImg.src = imgSrc; // onload ハンドラーをアタッチした後に設定することが重要です

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler