【JavaScript・HTML】URLから画像の大きさを取得するには

※この記事は4年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、コロナがやばいですね。
北海道は二度目の緊急事態宣言だされてしもた・・・。

さて、表記の件、なんで今更わざわざこんな簡単な内容のこと書こうと思ったかと、
重要な記載がない記事があまりにも多くて、イラッときたからです。

そう、このブログの使命はそこにあるのだ！
初学者でも、一発でたどり着ける実装、そこが大事ではないか！

では、まず、JavaScriptにて、画像をURLで取得、大きさを、なんて調べると、だいたいは下記のような構文が出てくる。

const image = new Image();
image.src = 'image.png';

console.log(image.width);
console.log(image.height);
// 本当に画像の本来の大きさの場合は下記
console.log(image.naturalWidth);
console.log(image.naturalHeight);

えらく簡単やん、楽勝やん！

んなわけあるかよ。

これ書くとたいていどうなるかというと、
全部0が出力される。

何が原因かって？
そんなん当たり前だ。
画像の読み込みが完了される前に取得しようとしているからだ。

本当に大きさなどを得たいなら、下記のようにせねばならない。

const image = new Image();
image.src = 'image.png';
image.onload = () => {
  console.log(image.width);
  console.log(image.height);
  // 本当に画像の本来の大きさの場合は下記
  console.log(image.naturalWidth);
  console.log(image.naturalHeight);
};

つまりは、画像の読み込みが完了した時点での実行にせねばならないということだ。
コールバック地獄の回避や、外部で使用したりしたい場合は、Promiseを使うと、やりやすいだろう。

だがしかし、このonloadつきの記事が、思ったより見つからなかった。
なんでやねん！

確かに、あたりまえだよ、読み込みは非同期だって、少し開発経験とかあればわかるよ？
でもよ、この話題調べてる時点で初学者なんだよ。
だったら、そこも言及すべきでしょが。

というわけで、久々に、現場目線系記事でした。