CreateJSのBitmapオブジェクトに、画像の幅や高さが入っていない時がある

Question

###前提・実現したいこと
JavaScriptで、
(1) サーバ上の画像ファイルを読み込み、
(2) DataURLに変換して、
(3) createjs.Bitmapクラスとして操作したい。

###発生している問題・エラーメッセージ
Bitmapオブジェクトに画像の幅と高さが入っている時と入っていない時がある。

###該当のソースコード

function () {

	var file = "sample.png"
	var image = new Image();

	image.onload = function() {
		// (2) canvas の toDataURL メソッドを使って画像ファイルを DataURL に変換
		var canvas      = document.createElement("canvas");
		canvas.width    = this.naturalWidth;
		canvas.height   = this.naturalHeight;
		canvas.getContext('2d').drawImage(this, 0, 0);

		var bitmap      = new createjs.Bitmap(canvas.toDataURL('image/png'));

		var w   = bitmap.image.naturalWidth;		// 値が入っていない事がある
		var h   = bitmap.image.naturalHeight;		// 値が入っていない事がある
		var w2  = bitmap.image.width;				// 値が入っていない事がある
		var h2  = bitmap.image.height;				// 値が入っていない事がある
	};

	// (1) Image クラスでサーバ上のファイルを読み込む
	image.src   = file;
}

###試したこと
ネットで類似ケースを検索したところ、preloadjsを使って
事前にファイルをロードしておいた方がいいという意見があったので、
preloadjsのLoadQueueでファイルを読み込むパターンも
試したのですが、やはり時々値が入っていない時があります。

###補足情報(言語/FW/ツール等のバージョンなど)
サーバはFreeBSD 8.4、クライアントはWindows 7 64bit を使っています。
ブラウザはIE 11やChrome 51では起きず、Firefox 47のみで現象を
確認しております。

Answer 1

一度Imageオブジェクトに入れてonloadで画像の展開が終わるのを待ってからにしてみてください。

var canvasImage = new Image();
canvasImage.onload = function() {
    var bitmap      = new createjs.Bitmap(canvasImage);

    var w   = bitmap.image.naturalWidth;        // 値が入っていない事がある
    var h   = bitmap.image.naturalHeight;        // 値が入っていない事がある
    var w2  = bitmap.image.width;                // 値が入っていない事がある
    var h2  = bitmap.image.height;                // 値が入っていない事がある

};
canvasImage.src = canvas.toDataURL('image/png');

Comments

[wobbegong]

var bitmap = new createjs.Bitmap(canvas.toDataURL('image/png'));

var w = bitmap.image.naturalWidth; // 値が入っていない事がある
var h = bitmap.image.naturalHeight; // 値が入っていない事がある
var w2 = bitmap.image.width; // 値が入っていない事がある
var h2 = bitmap.image.height; // 値が入っていない事がある

の5行を頂いたソースに変更したところ、現象が起きなくなりました。
まだしばらく注視する必要はありますが、今のところ効いているようです。
ありがとうございました！