定番
新着
履歴

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

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>

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

表示の横: px
表示の縦: px
実際の横: px
実際の縦: px

実際HTML上に描画しなくても、サーバーサイドでなくても、サイズが取得できるので、画像を拡大する機能をつける時などに利用機会があるかもしれません。

2018-09-12 18:42:19
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top