【javascript】画像の元の大きさやサイズを取得する方法

画像はhtmlやcssでサイズを指定することによってさまざまなサイズで表示させることが可能ですが画像の幅や高さを取得したいときがあると思います。

javascriptを使用することによって幅と高さを取得することが可能です。

今表示されている画像のサイズを取得したいときは、WidthやHeightで取得できますが画像本来のサイズを取得したいときがあると思います。

そんなときは、naturalWidthとnaturalHeightで取得することができます。

本来の画像サイズを取得する方法

document.getElementById('id名').naturalWidth;

画像本来の幅を取得する場合にはnaturalWidthを使用します。

document.getElementById('id名').naturalHeight;

画像本来の幅を取得する場合にはnaturalHeightを使用します。

上記の方法で画像サイズを取得することができますがページを読み込む際に画像の読み込みが完了していないと画像のサイズを取得できないことがあります。

なので画像の読み込みが完了してからサイズを取得するようにしましょう。