JavaScriptのImageオブジェクトの画像サイズ取得

Question

JavaScript(jQuery)で下記のようにImageオブジェクトを生成し、画像を読み込んだあとに、縦横サイズを取得し、その値を次の処理で使いたいのですが、画像の読込は非同期のため、うまくサイズを取得できません。

連続して処理を行いたいので、Imageオブジェクトのonloadイベントを使わず、読込完了を待ってから、サイズを取得できる実装例がありましたらお願いします。

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

// onloadは使わない
//image.onload = function(){
//  width = image.width;
//  height = image.height;
//};

image.src = 'hoge.jpg'; // 読み込む画像

width = image.width; // これらは取得できない
height = image.height;

// 次に処理するもの
alert(width+'x'+height);
		:

Answer 1

JSではその処理はできないと思います。
そもそもシングルスレッドなので処理を待ってしまうと画面がフリーズしてまうので。

なので、JSでは非同期で処理を行うのが基本です。
逆に非同期でやらない理由はなんででしょうか？

ちなみに並列っぽく処理を書きたい、ということであれば
jQueryのdeferredや、比較的新しいブラウザをターゲットにできるならPromiseあたりで調べてみると答えが見つかると思います。

Answer 2

setInterval() で naturalWidth, naturalHeight を監視すれば原理的には可能です。
が、addEventListener で load を監視したほうが素直ですし、負荷も小さいと思います。

• 4.8.4 The img element - HTML Standard
• HTMLImageElement - Web API インターフェイス | MDN

(2015/12/01 19:56追記)
load イベントのサンプルを追記しました。

'use strict';
(function () {
  function handleLoad (event) {
    var img = event.target;

    img.removeEventListener('load', this, false);
    this.complete(img);
  }

  function next (img) {
    console.log(img.width, img.height);
  }

  function main () {
    var srcList = ['sample1.jpg', 'sample2.jpg', 'sample3.jpg'],
        listener = {handleEvent: handleLoad, complete: next};

    for (var i = 0, l = srcList.length, img; i < l; ++i) {
      img = new Image;
      img.addEventListener('load', listener, false);
      img.src = srcList[i];
    }
  }

  main();
}());

(2015/12/02 07:59追記)
ひょっとして実行順も保証したいという意味だったでしょうか。
実行順を保証するコードを追記しました。

'use strict';
(function () {
  function handleLoad (event) {
    var img = event.target,
        imgList = this.imgList,
        srcList = this.srcList;

    img.removeEventListener('load', this, false);
    imgList[srcList.indexOf(img.getAttribute('src'))] = img;

    if (Object.keys(imgList).length === srcList.length) {
      this.complete(imgList);
    }
  }

  function next (imgList) {
    for (var i = 0, l = imgList.length, img; i < l; ++i) {
      img = imgList[i];
      console.log(img, img.width, img.height);
    }
  }

  function main () {
    var srcList = ['sample1.jpg', 'sample2.jpg', 'sample3.jpg'],
        listener = {
          handleEvent: handleLoad,
          srcList: srcList,
          imgList: [],
          complete: next
        };

    for (var i = 0, l = srcList.length, img; i < l; ++i) {
      img = new Image;
      img.addEventListener('load', listener, false);
      img.src = srcList[i];
    }
  }

  main();
}());

Comments

[think49]

実行順を保証するコードを追記しました。

Answer 3

onloadを使わずに画像のロード完了をチェックするには、setIntervalやsetTimeoutを使うのが一般的かと思います。「連続して処理」する内容にもよりますが、自分がよく使う方法を以下に記します。

var img = new Image();
img.src = './images/sample.jpg';

(function(){
	if(!img.naturalWidth){ //naturalWidthがセットされていなければ
		setTimeout(arguments.callee); //次のフレームで再度チェック
		return; //以下の処理を停止
	}

	//naturalWidthがセットされていれば以下の処理を実行
	alert(img.naturalWidth + '/' + img.naturalHeight);
})();

onloadイベントは古いIEでキャッシュを読んだ時に発生しないことがあったり、completeはsrcが空の場合の値がブラウザごとに違ったりするので、自分もonloadイベントを使わないことが多いです。

ご参考まで。

Answer 4

画像ロード、処理
画像ロード、処理
画像ロード、処理
とし、画像は読み込み順が前提にあり、画像1のx、y
画像2のx、y
、、、
として、画像1の処理が終わる前に
画像2の処理がかんりょうしてはまずい、

というばあいは、つかいたくないだろうけど、onload
をつかう、onload の中で、キューに登録し、画像の数分きゅーが溜まってないなら何もしない。
キューの長さとonload イベント実行回数が等しいとき、つまり最後のonload イベント処理内で、
キューを画像の読み込み順序でソートして先頭から読み解けば期待する順序のある画像読み込みと
画像のーx、yを扱った処理が可能です。
キューに格納する項目は、画像の番号、画像のxとy
画像の番号で昇順ソートすることで、画像の読み込み順序を同期化したとみなせますね。

Answer 5

edo_m18さんのおっしゃるように基本的には非同期のコーディングを書くのが自然かなと思います。
promiseやdefferedを使わない場合は、以下のようなコードで実現できると思います。
動かしていないので、参考までですが、コードをのせておきます。

var images = ['1.png','2.png','3.png'] ; // ロードする画像名
var sizeData = {}; // 画像のサイズ情報

// 全ての画像がロードされた時に呼ばれる処理
var onAllImageLoaded = function(){
    console.log(sizeData) ;
} ;

// 全画像分ループ
jQuery.each(images,function(i,imageName){
    var image = new Image() ;
    // 画像がロードされた場合のコールバック
    image.onload = function(){
        sizeData[imageName] = {
            w:image.width,
            h:image.height
        } ;

        // 全画像のsizeDataがあるか毎回チェック
        if(Object.keys(sizeData).length == images.length){
            // 全てロードされていたら、コールバックを実行
            onAllImageLoaded() ;
        }
    } ;
    image.src = imageName ;
}) ;

Answer 6

あまりきちんと動作確認していませんが。

while(!image.complete); // 注意:画像が存在しないとたぶん無限ループします
width = image.width; 
height = image.height;