ブラウザのサイズ変更にもかかわらず、元の画像のサイズを確認するにはどうすればよいですか?

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

クライアント側でサイズ変更された画像の元のサイズを決定することは、ブラウザの不一致による問題。ただし、フレームワークに依存しない信頼性の高いオプションがいくつかあります。

オプション 1: 属性と読み取りオフセットを削除

から幅と高さの属性を削除します。画像タグ。これにより、offsetWidth プロパティと offsetHeight プロパティを読み取って、画像の実際の物理的寸法を取得できるようになります。

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

JavaScript 画像オブジェクトを作成するそしてその src 属性を画像ソースに設定します。次に、オブジェクトの幅と高さのプロパティを読み取ります。このメソッドを機能させるには、ページに画像を追加する必要はありません。関数の例を次に示します。

<code class="html">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;
}</code>

注: コメントで述べたように、イメージの onload イベントで関数を実行して、イメージが完全に読み込まれる前に確実にロードされることが重要です。寸法を読み取ろうとしています。

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