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

published: 2018.04.02 / modified:

例えば、Webページで、ある画像をサムネイルとして表示させていて、クリックすると、その画像をオリジナルサイズで(モーダルウィンドウなどで)表示させたい。
上記のように、画像のオリジナルサイズを必要とする場合、JavaScriptで、 Image オブジェクトのプロパティに naturalWidth と naturalHeight があるので、それを利用する。

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

naturalWidth プロパティで画像本来の幅を、 naturalHeight プロパティで画像本来の高さを取得する。
画像が読み込まれてから実行する。

var img = new Image();
img.onload = function() {
  var naturalWidth = img.naturalWidth;
  var naturalHeight = img.naturalHeight;
};
img.src = 'example.jpg';

Previous Article

Next Article