さまざまなブラウザでサイズ変更された画像の元の寸法を正確に測定するにはどうすればよいですか?

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

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

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

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

<code class="javascript">const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;</code>

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

代替方法では、JavaScript 画像オブジェクトを利用します。 Image オブジェクトを作成し、その src プロパティに画像ソースを割り当て、画像が読み込まれた後にその幅と高さのプロパティに直接アクセスします。

<code class="javascript">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</code>

イベント処理の重要性を忘れないでください。大きな画像の場合、onload イベントを使用せずにオプション 2 のアプローチを使用すると、コードの実行時に画像がまだ読み込まれていない可能性があるため、結果が空になる可能性があります。

これらのブラウザーに依存しない手法を採用することで、自信を持って次のことができます。サイズ変更された画像の実際の寸法を特定し、Web アプリケーションの精度と柔軟性を強化します。

以上がさまざまなブラウザでサイズ変更された画像の元の寸法を正確に測定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。