60
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

PromiseベースでImage().onloadする

やりたいこと

JavaScriptで、画像の width/height が知りたいとき、以下のようにする。

const img = new Image();

img.onload = () => {
  console.log(img.width, img.height);
}
img.src = '画像のパス';

img.src にパスをつっこんで、読み込み完了したタイミングで onload が走る。
このとき、 onload で完了を待たずに img.width などとしても0が返される(読み込み完了前の値が返される)。

これを Promise ベースで書いて、 async/await や、 then/catch の構文で使えると便利なのでは。

結果

こう書ける。Imageに限らず、onloadにコールバック指定する系はだいたい書き換え可能。

new Promise((resolve, reject) => {
  const img = new Image();
  img.onload = () => resolve(img);
  img.onerror = (e) => reject(e);
  img.src = '画像のパス';
})

これで await でも then でも catch でもなんでも出来る

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

// then/catch
loadImage('なんか画像のパス').then(res => {
  console.log(res.width, res.height);
}).catch(e => {
  console.log('onload error', e);
});

// async/await
async function() {
  const res = await loadImage('なんか画像のパス').catch(e => {
    console.log('onload error', e);
  });
  console.log(res.width, res.height);
}

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
60
Help us understand the problem. What are the problem?