JavaScript（jQuery）で画像のオリジナルサイズを取得したい

Question

現在Monacaを使ってアプリを開発しております。

アプリの中で画像のオリジナルサイズを取得したいと思い、以下のコードにて試していますが、正しい画像サイズを取得できません。

var array = ['ｉｍａｇｅ０１．ｊｐｇ'， 'ｉｍａｇｅ０2．ｊｐｇ'， 'ｉｍａｇｅ０3．ｊｐｇ'];

for (var i = 0; i < array.length; i++) {
 
  var path  = array[i];
  var image = new Image();

      image.onload = function () {
        var imageWidth  = image.width ;
        var imageHeight = image.height ;
      }

      image.src = path;

      alert(imageWidth + 'x' + imageHeight);
}

実際の画像サイズは2000x1500pxであるにもかかわらず、上記コードを用いて取得した結果は1124x1999pxとなり、画角も異なります（この値は画像によって異なります）。

iPhoneで動作確認を行っているのですが、iPhoneの画面画角に変形されているようにも思えますが、これも画像によって異なります。正しい画像サイズを取得できる方法お分かりの方いらっしゃいましたらよろしくお願いいたします。

コードを書くにあたって参考にしたページはこちらです。
https://lab.syncer.jp/Web/JavaScript/Snippet/35/

追記

上記コードになる前に書いていたのが下記のコードです。

上記コードでは省いておりましたが、一連の画像を読み込む前に、別の画像(下記 画像A＝「image_A.jpg」)を読み込んでおり、その次に上記コードと同じくfor文で画像(画像B＝「image_B1〜B3.jpg」)を読み込んでいます。

画像Aは正しく読み込んで画像サイズを取得するのですが、その次の画像Bに関しては画像サイズが0となって正しく取得できません。

画像Bの方の変数名を変更しても同様で、同じようなコードなのになぜ画像Aが正しく読み込め、画像Bが正しく読めないのか分かりません。画像を何らか先に読み込む必要があるのか？と思い、調べて試してみたのが先に投稿しました上記のコードとなります。

// 画像Aの読み込み-----------------------------------------------------------------------

var image       = new Image();
    image.src   = 'image_A.jpg';
var imageWidth  = image.width;
var imageHeight = image.height;

alert(imageWidth + 'x' + imageHeight); // ←「2000x1500」など、正しい画像サイズを取得できる
      

// 画像B1〜B3の読み込み------------------------------------------------------------------

var array = ['image_B1.jpg', 'image_B2.jpg', 'image_B3.jpg'];

for (var j = 0; j < array.length; j++) {

  var image       = new Image(); // ←変数名を上と変えて「image2」としても「0」を取得します
      image.src   = array[j];
  var imageWidth  = image.width;
  var imageHeight = image.height;

  alert(imageWidth + 'x' + imageHeight); // ←結果は「0x0」と画像サイズを取得できない
  
} 

追記2

先のコードを調整してみました。実際にはこれをfor文で囲み、複数画像を順繰りと舐めて画像サイズを取得したいと考えております。

var image = new Image();
    image.src = 'image.jpg';
    image.onload = function (){ // 引数に「image」を入れても同じ
      var imageWidth = image.naturalWidth;
      var imageHeight = image.naturalHeight;
      alert(imageWidth + 'x' + imageHeight);
    }

Comments

[turbgraphics200]

全角になっているところを半角に修正して。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

for (var i = 0; i < array.length; i++) {

  var path  = array[i];
  var image = new Image();
//...
}

↑ループの周回ごとにimage変数が書き換えられます。
もしonloadイベントが起きる前にループが終わるなら、

      image.onload = function () {
        var imageWidth  = image.width ;
        var imageHeight = image.height ;
      }

↑ここで参照しているimageは、想定しているものと異なっている可能性があります。

対策ですが、クロージャを作るか、letを使うなどしてブロックスコープを使うか、またはイベントターゲットの束縛を受けているthisを使ってみてください。

Comments

[agepan]

ご回答ありがとうございます。
出力結果をよく確認すると、取得された正しくない画像サイズは、その前に読み込んでいた別の画像のサイズをそのまま引っ張ってきていることが原因だと分かりました。ご指摘の通り「image」が想定と違うものを読んでいたようです。コードを追記させていただきましたので、一度目を通して頂けますと幸いです。

[Lhankor_Mhy]

追記のコードについては、ロードが終わっていないのが原因だと思います。頭書のコードのとおり、イベントを拾った方がよいのでは。
image_A.jpg が正しく取得されるのは、なぜなのか分かりませんが……

[Lhankor_Mhy]

追記と同様のコードを試してみましたが、分かったことは以下のとおり。

・Aのコードでも画像がキャッシュされていなければ、0x0になる。
・Bのコードでも画像がキャッシュされていれば、サイズが表示される。
・Bのコードでキャッシュされているものといないものを混在させると、キャッシュされているものだけサイズが表示される。

以上のとおり、追記のコードの現象はループ構造とは関係ないと思います。

[agepan]

ありがとうございます、コメント拝見して気付きましたが、画像Aに関しては別画面で一旦読み込んでおりました。現在課題となっているのはそれとは別の画面での処理なのですが、おそらく画像Aは先に読んでいたキャッシュから画像サイズを取得し、どの画面でも読み込んでいなかった画像Bに関しては取得できなかった、ということだと思います。やはり画像が完全に読み込まれてからでないとサイズは取得できないようですね。

[Lhankor_Mhy]

ご解決されたようで何よりです。
その他、ご不明な点があればコメントしてください。

[agepan]

先のコードに戻るのですが、onloadで読み込んでから画像サイズを取得できるかなと思い、【追記2】のようなコードを書いたのですが、結果がundefinedとなってしまいます。このコードで問題ありそうな部分など分かりますでしょうか？

[Lhankor_Mhy]

それは引数に「image」を入れた時だと思いますが、イベントハンドラの第1引数は event オブジェクトですから、想定されているようなオブジェクトを受け取ることはできません。繰り返しになりますが、this を使うなどしてください。または、event.targetでも動くかもしれません。

[agepan]

「回答4」に記したコードに書き換えることで無事に取得できました！ありがとうございます！

もう一つよければお尋ねしたいのですが、onloadで画像を読み込んでから画像サイズを取得する処理に入りますが、この処理が完了するのを待つことなく、後ろ(下)に書いている続きのコードが実行されてしまうのですが、画像サイズ取得完了してから続きに書いたコードを実行させるスマートな方法はあるんでしょうか？

[Lhankor_Mhy]

それは難しいので、続きのコードを別の関数の中につめこんで、onloadのハンドラの中からその関数を呼び出して実行するようにするしかないと思います。

[agepan]

なるほどやはりそうですか、では別関数化させて続きの処理をさせてみようと思います。どうもありがとうございました！

[Lhankor_Mhy]

あ、promise と async/await という方法がありましたね……
IEで動作しないのが難点ですが、ご興味があれば。
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/

[agepan]

ありがとうございます、参考になります。
Monacaの環境ですとiOSとAndroidで対応していれば大丈夫ですので、上記勉強させて頂きます！

Answer 2

naturalHeight、naturalWidthプロパティを使ってください。https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement

Comments

[agepan]

ご回答ありがとうございます。最初naturalWidth、naturalHeightを用いていたのですが、結果が変わりませんでしたので、いろいろいじって現在のimage.widthとimage.height指定に行き着いております。

[x_x]

どういうコードを書いていたのでしょうか？
提示コードではそもそもエラーになって動かないのでは？

[agepan]

コードを追記させていただきました。お目を通して頂けますと幸いです。

Answer 3

「Promise.all() を使え」といわれそうですが。

'use strict';
const getImgNaturalSizeAll = (() => {
  function handleLoad (event) {
    const img = event.target,
          map = this.map;

    map.set(img.getAttribute('src'), {naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight});

    if (this.size === map.size) {
      this.resolve(map);
    }
  }

  return function getImgNaturalSizeAll (imgList, resolve) {
    const map = new Map,
          doc = document;

    for (let fileName of imgList) {
      const img = doc.createElement('img');

      img.src = fileName;
      img.addEventListener('load', {handleEvent: handleLoad,size: imgList.length, map: map, resolve: resolve}, false);
    }

  };
})();

function resolve (map) {
  console.log(JSON.stringify([...map]));
}

getImgNaturalSizeAll(['https://placehold.jp/4000x4000.png','https://placehold.jp/1000x1000.png', 'https://placehold.jp/150x150.png'],resolve);  // [["https://placehold.jp/4000x4000.png",{"naturalWidth":4000,"naturalHeight":4000}],["https://placehold.jp/1000x1000.png",{"naturalWidth":1000,"naturalHeight":1000}],["https://placehold.jp/150x150.png",{"naturalWidth":150,"naturalHeight":150}]]

※「ファイル名の配列」とMapの順序性保持はさぼりました。
上の結果ではたまたま一致していますが、保証しません。

※このコードは既存のdocumentにあるimg要素ノードに適用できない点で汎用性がありません。img要素ノードの配列を渡す設計にすると、NodeListも渡せるようになるのでそれなりに便利です。

Re: agepan さん

Comments

[agepan]

回答遅れまして申し訳ございません。
わざわざコードを書いて頂きましてありがとうございます！
今回は今までに頂きました情報と、それをなんとかコードを弄くり回しまして実装することができました。たださらに優れたコードを取り入れたいと思いますので、頂きましたコードは今現在行っている作業が終わり次第、貴重な勉強材料として確認させて頂きます。ありがとうございました！

Answer 4

このようなコードにすることで無事取得できました。

var image = new Image();
    image.src = 'image.jpg';    

    image.onload = function (){
      var imageWidth = this.width;
      var imageHeight = this.height;
      alert(imageWidth + 'x' + imageHeight);
    }

Answer 5

Jquery未使用でも簡単に取得できます。

// オリジナル画像サイズを取得
const getOriginalSize = () => {
  const img = document.getElementsByClassName('fn-imageSize')[0];
  const imgSizeWidth = img.naturalWidth;
  const imgSizeHeight = img.naturalHeight;
  console.log(imgSizeWidth);
  console.log(imgSizeHeight);
}

window.addEventListener('load', getOriginalSize, false);

------ 複数要素取得したい時 ------

// オリジナル画像サイズを取得
const getOriginalSize = () => {
  const img = document.getElementsByClassName('fn-imageSize');
  // 取得したNodeListを配列化する
  const images = [].slice.call(img);
  images.forEach(function(item) {
    const imgSizeWidth = item.naturalWidth;
    const imgSizeHeight = item.naturalHeight;
    console.log(imgSizeWidth);
    console.log(imgSizeHeight);
  });
}

window.addEventListener('load', getOriginalSize, false);

Comments

[agepan]

ご回答ありがとうございます！
> const img = document.getElementsByClassName('fn-imageSize')[0];
この部分はHTML上にある画像を差していると思いますが、画像をファイルパスで指定することでも可能でしょうか？