画像の元のサイズをnaturalWidthとnaturalHeightで取得する - JavaScript

published: 2018.04.02 / modified:

Webページ上に、画像を本来の大きさではなく、縮小して表示させている場合、その画像の元のサイズを JavaScript で取得するにはどうすればいいのか。
上記のようなケース、JavaScript で画像の元のサイズを取得したい場合に、HTMLImageElement の naturalWidth および、 naturalHeight プロパティを利用する。
以下、naturalWidth、 naturalHeight プロパティに関するメモ。

naturalWidth

naturalWidth プロパティは画像の元の幅を返す。

var img = document.querySelector('.myImage');
var naturalWidth = img.naturalWidth;

naturalHeight

naturalHeight プロパティは画像の元の高さを返す。

var img = document.querySelector('.myImage');
var naturalHeight = img.naturalHeight;

Image()

Image() コンストラクタを利用して、画像の本来の大きさを取得する方法もある。

Previous Article

Next Article