ブラウザを超えて元の画像のサイズを取得するにはどうすればよいですか?

ブラウザ間での元の画像の寸法の取得

クライアント側でサイズ変更された画像の物理的な寸法を決定することは、ブラウザが異なると困難になる場合があります。ただし、フレームワークに依存しない信頼性の高い 2 つのオプションが利用可能です。

オプション 1: offsetWidth と offsetHeight を使用する

画像要素から幅と高さの属性を削除します (< ;img>タグ）。次に、offsetWidth プロパティと offsetHeight プロパティを使用して、サイズ変更された画像の実際の幅と高さを取得します。

<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 属性を画像の URL に設定し、幅と高さのプロパティを使用して元の寸法を取得します。

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

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>

このオプションでは、画像はそうする必要がないことに注意してください。ページに追加してロードし、サイズを決定します。

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