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

2021 5/06

2020.03.02 2021.05.06

URL Copied!

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

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

ちなみに、img要素等で画面にレンダリングした場合は、読み込みが完了した後にelement.naturalWidth、element.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)を同期的に取得することが可能です。

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

まとめ