【jQuery】jsを使って画像のオリジナルサイズを調べる方法

今は画像のサイズを取得する方法について紹介していきたいと思います。

画像のサイズは表示されている大きさではなく本来のオリジナルサイズになります。

jsを使うことでオリジナルサイズを取得することが可能です。

画像のオリジナルサイズを調べる

シンプルな手順としては下記になります。

 Imageオブジェクトを作成する

まずはImageオブジェクトを作成します。

var img = new Image();

srcに取得したい画像のパスを指定する

img.src = '画像のパス';

縦と横のサイズを取得する

var width  = img.width;
var height = img.height;

画像の幅を変数「width」入れて画像の高さを変数「height」に入れます。

jQueryで複数の画像のオリジナルサイズを取得する

次はjQueryを使って複数の画像のオリジナルサイズを調べる方法になります。

html

<ul>
	<li>
        	<a href="https://placehold.jp/150x150.png"><img src="https://placehold.jp/150x150.png"></a>
                <span></span>
        </li>
        <li>
                <a href="https://placehold.jp/300x500.png"><img src="https://placehold.jp/300x500.png"></a>
                <span></span>
        </li>
        <li>
                <a href="https://placehold.jp/50x50.png"><img src="https://placehold.jp/50x50.png"></a>
                <span></span>
        </li>
</ul>

jQuery

jQuery(function () {
        jQuery('ul li a').each(function(i) {
                var img_num = 'image' + (i+1);
                jQuery(this).addClass(img_num);        
        });
       
        jQuery('ul li').each(function(i) {                     
                var img_num = 'image' + (i+1);                 
                const img = new Image();
                img.onload = function() {
                        var size = this.width + 'x' + this.height;
                        jQuery('ul li .' + img_num + ' + span').text(size);
                }
                img.src = jQuery('ul li .' + img_num).attr("href");
               
        });
});    

タイミングに注意する

画像が読み込まれる前だと正しい値が取得できない場合もあるのでタイミングに注意しましょう。

サンプル

画像3枚のオリジナルサイズを取得して画像に下に横と縦のサイズをテキストで出力するサンプルになります。