画像の元のサイズを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() コンストラクタを利用して、画像の本来の大きさを取得する方法もある。