Hirooooo’s Labo

開発メモ、ガジェット、日記、趣味など、思った事を思ったまんま書くブログ

Javascriptで画像の幅と高さを取得する方法(promise async/await対応)

Javascriptで画像の幅と高さを取得する方法(promise async/await対応)
Javascriptで画像の幅と高さを取得する方法(promise async/await対応)

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

ちなみに、img要素等で画面にレンダリングした場合は、読み込みが完了した後にelement.naturalWidthelement.naturalHeightで取得できますが、今回は画面に表示はしないで、選択した画像を生成したImageオブジェクトに読み込ませて、高さ(Height)と幅(Width)を取得する方法になります。

Javascriptで画像の幅と高さを取得する方法

基本的にはパスをImageオブジェクトのsrcに設定して、読み込みが終わってからwidthとheightを取得します。

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

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

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);
  }
}

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

これからJavascriptを勉強したい人にオススメの本

ノンプログラマのためのJavaScriptはじめの一歩 WEB+DB PRESS plus

ノンプログラマのためのJavaScriptはじめの一歩 WEB+DB PRESS plus

  • 作者:外村 和仁
  • 出版社/メーカー: 技術評論社
  • 発売日: 2018/11/14
  • メディア: Kindle版

知識ゼロからはじめるゆっくり・ていねいJavaScript ES6対応

知識ゼロからはじめるゆっくり・ていねいJavaScript ES6対応

  • 作者:狩野祐東
  • 出版社/メーカー: ソシム
  • 発売日: 2019/02/22
  • メディア: Kindle版

よくわかるJavaScript

よくわかるJavaScript