Development

Javascriptで画像サイズ(幅と高さ)を取得する方法

  • Javascriptで画像サイズ(高さと幅)を取得したい
  • element.naturalWidth/naturalHight以外の方法
  • 画面表示はしないでloadした状態で調べたい

INPUTで指定した画像ファイルのサイズ(容量ではなくてHeightWidth)をJS(Javascript)で取得したかったので、やり方をメモしておきます。

ちなみに、img要素等で画面にレンダリングした場合は、読み込みが完了した後にelement.naturalWidthelement.naturalHeightで取得できますが、今回は画面に表示はしない方法です。

選択した画像を生成したImageオブジェクトに読み込ませて、高さ(Height)と幅(Width)を取得します。

この記事でわかること
  • 画像を読み込ませてjsで高さと幅を取得する方法
  • promiseでasync/awaitの書き方をする方法

JS(Javascript)で画像サイズ(幅と高さ)を取得する方法

基本的にはパスをImageオブジェクトのsrcに設定して読み込ませます。

画像がImageオブジェクトへ読み込みが終わってから、widthとheightを取得します。

var image = new Image();
var width;
var height;

image.onload = function(){
  width = image.width;
  height = image.height;
};
image.src = 'hogehoge.jpg';

基本的な仕組みは上記ですが、読み込みの完了を待たないといけないので、async/awaitを使えるようにfunctionを変更します。

promiseでasync/awaitを使えるようにする

上記のFunctionをpromiseベースで書きなすことによって、awaitや.thenなどの書き方で利用することができます。

// promise化したfunction
const loadImage = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = (e) => reject(e);
    img.src = src;
  });
};

// promise then/catch
loadImage('hogehoge.jpg')
  .then(res => {
    console.log(res.width, res.height);
  })
  .catch(e => {
    console.log('onload error', e);
  });

// async/awaith
async () => {
  try {
    const res = await loadImage('hogehoge.jpg');
    console.log(res.width, res.height);
  } catch (e) {
    console.log('onload error', e);
  }
}

これで画像の読み込みが終わってから高さ(height)と幅(width)を同期的に取得することが可能です。

誰かの参考になれば嬉しいです。

勉強するならプログラミングスクールがベスト

今からプログラミングを勉強してプロのエンジニアを目指すなら、プログラミングスクールで勉強するのがベストです!

未経験からプロのエンジニアを育てるオンラインブートキャンプ

最短4週間で未経験からプロを育てるオンラインスクールなので、自宅からプログラミングやアプリ開発を学ぶことができます。


オススメ本

これからJavascriptを勉強したい人や、今Javascriptを勉強中の人にオススメの初心者向けの本を紹介しておきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です