JSで画像の元の幅と高さを取得する方法-HTMLの知識-php.cn

JSで画像の元の幅と高さを取得する方法

藏色散人

リリース： 2021-01-11 11:13:17

オリジナル

7917 人が閲覧しました

JS は画像の元の幅と高さを取得します。これは画像の元のサイズです。HTML5 の NaturalWidth 属性と NaturalHeight 属性を使用して画像の元のサイズを取得できます。画像の元の幅と高さは、HTML5 画像の NaturalWidth プロパティと NaturalHeight プロパティを使用して簡単に見つけることができます。

おすすめ参考：「JavaScriptチュートリアル」

JSで画像の元の幅と高さを取得する方法

ということで、前回の記事でも紹介させていただきました。 JS で画像の現在の幅と高さを取得する方法は、実際には元の幅と高さを取得する方法と似ています。必要な場合は、最初にそれを参照してください。

以下では、具体的なコード例を組み合わせて、元の画像サイズを取得する js メソッド を紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js获取图片原始宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
            alert("原始 width=" + realWidth + ", " + "原始 height=" + realHeight);
 }
    </script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;" >
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

ログイン後にコピー

画像の現在の幅と高さを取得する clientWidth 属性と clientHeight 属性とは異なり、画像の元のサイズを取得するのは主に ## です。 #naturalWidth および naturalHeight属性。これら 2 つのプロパティによって取得される画像の元の幅と高さは、外部の幅と高さのプロパティ設定を変更しても変更されません。

ここで使用する画像の元の幅と高さは次のとおりです: 716x565px;

JSで画像の元の幅と高さを取得する方法

次に、上記の JS コードを使用します。画像の元のサイズの結果を取得するには、次の図に示すように:

JSで画像の元の幅と高さを取得する方法

注: querySelector() メソッドは、ドキュメント内の要素に一致する要素を返します。指定された CSS セレクター。 querySelector() メソッドは、指定されたセレクターに一致する最初の要素のみを返します。すべての要素を返す必要がある場合は、代わりに querySelectorAll() メソッドを使用します。

この記事は、js を使用して画像の元の幅と高さを取得する方法の紹介です。これも、必要とする友人の役に立てば幸いです。

以上がJSで画像の元の幅と高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。