【JavaScript】画像の本来のサイズを取得する naturalWidth と naturalHeight プロパティ

img 要素の画像がどれくらいのサイズでレンダリングされているのかを JavaScript から取得することは多いと思いますが、ときには画像ファイルの本来の幅と高さを知りたい場合もあるでしょう。ここでは img 要素の DOM オブジェクトの naturalWidth と naturalHeight プロパティを試してみましょう。

naturalWidth と naturalHeight の仕様

naturalWidth と naturalHeight プロパティは、img 要素の DOM オブジェクトのプロパティで、img 要素に組み込まれた画像の本来の幅と高さをピクセルで返します。これらプロパティは、たとえその画像が CSS などで縮小表示または拡大表示されていたとしても、必ず、その画像の本当の幅と高さを返します。

いずれも整数値を返します。もし画像の本来のサイズが得られない場合は、いずれも 0 を返します。

これらのプロパティは読み取り専用です。値をセットすることはできません。

ブラウザーのサポート状況

Internet Explorer 11 を含め、すべてのメジャーなブラウザーが naturalWidth と naturalHeight をサポートしています。[Can I use]

naturalWidth と naturalHeight の使い方

img 要素に画像が読み込まれた後でないと naturalWidth と naturalHeight の値は取得できませんので、次のコードのように window オブジェクトで load イベントが発火した後に値を取り出す必要があります。。

<img src="pic.jpg" id="pic" alt="">

<script>
  const pic = document.getElementById('pic');
  window.addEventListener('load', () => {
    const w = pic.naturalWidth;
    const h = pic.naturalHeight;
    console.log(w + ' x ' + h); // 1920 x 1080
  }, false);
</script>

もし画像が読み込まれる前に値を取得すると、それぞれの値は 0 になります。

<img src="pic.jpg" id="pic" alt="">

<script>
  const pic = document.getElementById('pic');
  const w = pic.naturalWidth;
  const h = pic.naturalHeight;
  console.log(w + ' x ' + h); // 0 x 0
</script>

window オブジェクトで load イベントが発火するより前にどうにかして値を取り出したいなら、img 要素の load イベントをリッスンすると良いでしょう。

<img src="pic.jpg" id="pic" alt="">

<script>
  const pic = document.getElementById('pic');
  pic.addEventListener('load', () => {
    const w = pic.naturalWidth;
    const h = pic.naturalHeight;
    console.log(w + ' x ' + h); // 1920 x 1080
  }, false);
</script>

最後に

恐らく一般的なウェブサイトで naturalWidth や naturalHeight を使うことは稀でしょう。

筆者は MotionJPEG のカメラ映像をう画面に表示するようなウェブアプリを開発する際にこれらのプロパティを良く使いました。カメラによって映像の幅や高さが違うだけでなく縦横比も異なります。このような映像を縦横比を考えながら綺麗にブラウザーウィンドウにはみ出さずに収まるよう映像を拡縮する必要があります。

このように、どのような画像が表示されるのか断定できない状況は意外に多いのではないでしょうか。そういうときに役に立つのが naturalWidth と naturalHeight です。

今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。