ブラウザーごとに元の画像サイズを確認するにはどうすればよいですか?

ブラウザ間での元の画像サイズの決定

Web 開発では、ページのパフォーマンスと応答性を最適化するために、クライアント側で画像のサイズを変更するのが一般的です。 。ただし、ブラウザーの不一致により、サイズ変更された画像の元の物理的寸法を決定するのが困難になる場合があります。この記事では、この情報を取得するための、フレームワークに依存しない 2 つの信頼性の高いオプションについて説明します。

オプション 1: OffsetWidth と OffsetHeight を使用する

この方法では、明示的な幅と高さの属性を削除します。 から要素。その後、offsetWidth プロパティと offsetHeight プロパティにアクセスして、サイズ変更された画像の実際の幅と高さを取得できます。このオプションはシンプルで、ほとんどの主要なブラウザでサポートされています。

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

2 番目の方法では、JavaScript 画像オブジェクトを作成し、その src 属性を設定します。画像のソースにアクセスし、その幅と高さのプロパティにアクセスします。これを機能させるために画像をページに追加する必要はないことに注意してください。

コード スニペットの例は次のとおりです:

<code class="javascript">function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Pekka による編集:

大きな画像で正確な結果を保証するために、画像の onload イベントを使用して関数をトリガーできます。そうしないと、画像の読み込みが完了するまで高さと幅を利用できない可能性があります。

以上がブラウザーごとに元の画像サイズを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。