JS 元画像のサイズと表示画像のサイズ

サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。

そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。

<img id="neko" src="/img/demo/cat/002.jpg" width="200"/>

まず、画像を表示します。この画像の横幅は200pxで、縦は元画像の比率に準じます。

上記の画像に対して、描画をトリガーに以下のようなJSを書きます。

<script>
window.onload = function() {
  v_width.innerHTML = neko.width;
  v_height.innerHTML = neko.height;
  n_width.innerHTML = neko.naturalWidth;
  n_height.innerHTML = neko.naturalHeight;
}
</script>

HTMLはこちら

<div>表示の横：<span id="v_width"></span> px</div>
<div>表示の縦：<span id="v_height"></span> px</div>
<div>実際の横：<span id="n_width"></span> px</div>
<div>実際の縦：<span id="n_height"></span> px</div>

すると以下のように、表示されているサイズと、画像自身の元のサイズが取得できます。