POPSブログ

CreateJS easeljs-0.8のLoadQueueクラスでの画像表示の変更など

337

  Category:  javascript2015/02/19 pops 

EaselJSが0.8にバージョンアップし(2014/12/15)、共にpreloadjs-0.6になり「LoadQueueクラス」などの設定に変更があります。新しいLoadQueueクラス、個別ImageLoaderクラス、Bitmap(URL)表示、での画像読み込み表示に関連することを調べてみます。easeljs-0.8.0 でのテストです。

 

CreateJS easeljs-0.8 LoadQueueクラスでの画像表示テスト

今回は、easeljs-0.8.0を使用しての「同じドメイン画像」を対象に、ローダー設定と振る舞いなどについて調べてみました。「同じドメイン画像」などは問題は有りませんが、「クロスドメイン画像」は取得が困難に成ります。Image()オブジェクトを利用した方が効率的と言う印象です。


easeljs-0.7までの「TagLoaderクラス」が削除され、画像でも標準ではXMLHttpRequest処理(本当かは不明)するように改めてあります、Canvasの描画ですから、画像に関しては当然といえます。
今まで簡単に操作できた「TagLoaderクラス」削除の影響は大きい。(非常に困る)

 

画像は本文とは何の関係も有りません、単なる心理的状況です。

mumumu wakaran

 

▼[ LoadQueueクラスでの画像表示の変更目次に進む ]

 

DEMO (easeljs-0.8用)

▼[ 目次 ]


LoadQueueクラス利用の画像一括読み込み表示のデモ、サムネールボタン付き。

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


demo


Chrome Opera Firefox IE9-11で動作確認済み。 Mac系統は未確認です。


「デモ」の HTML、JS、CSS は「デモ」ページに有ります。

 

[ LoadQueueクラスでの画像表示の変更目次 ]


1.preloadjs-0.6 LoadQueueクラスでの画像表示

1-1 Bitmap(画像URL)での画像表示 (多種多様に新化しました)

1-2 LoadQueueクラスでの画像表示 (同じドメイン、通常読み込み)

1-2-1 エラー処理とLoadQueueの引数 (tureでエラー処理)

1-2-2 loadFileクラス (役割がふえました)

1-2-3 loadItemクラス (新規のクラス)

1-2-4 個別ローダーの利用 (画像用ImageLoaderの例)

1-2-5 TagRequestとXHRRequestクラス (機能するが、正確かどうか不明)

1-3 Image()オブジェクトでの画像読み込み表示(クロスドメイン画像を簡単読み込み)

1-4 XMLHttpRequest(XHR) (XMLHttpRequestレベル1、ほぼ説明なし)

1-5 LoadQueueクラスでのFlickr画像の読み込みは困難 (効率悪し役立たず)

DEMO 1 (preloadjs-0.6 通常読み込みと表示のサンプル)

DEMO 2 (preloadjs-0.6 改造カスタムプラグイン読み込み、クロスドメイン画像可)

 

preloadjs-0.6 LoadQueueクラスでの画像表示

▲[ 目次 ]


今回は大きな変更点があります。ほぼ、easeljs-0.7.1での設定で使用は出来ますが、ファイル別の個別ローダーなど追加され、より一層、柔軟性があり、簡単に目的ファイルの読み込みが可能です。但し、例など少なく現時点では自己解決しか方法はないようです。


LoadQueueクラスの特徴


1. 画像、ファイルなどは原則、同じドメインに在るものをロードします。(クロスドメイン画像読み込みも可能ですが、多少煩雑になります。実際にFlickrで行ってみたが想像以上に大変でしたし、処理が煩雑になる)
むしろ「クロスドメイン画像」を読み込めないように配慮していると表現したほうが正しいと思います。
2. 画像ローダークラスなど専用の読み込みローダークラスが追加されましたので、読み込めるかのチェックと、取得が出来るようになった。(注意、表示ではなくチェックです、イベントを加えれば取得可能)
3. 画像ローダーにクロスオリジン指定が簡単に出来るように成った。(以前は簡単には出来ない仕組みでした)
4. Manifest利用の際にXHRのエラー(fileerror)、停止回避のため「ファイルエラー」が追加された。
5. ローダーの組み合わせなどが柔軟に出来るようになった。但しサンプルなど無く非常に判り難い。
(今まで以上に「悩める空間」ですから思いっきり悩んでください)


まだ資料なども少ないので、今回は画像に限定してテスト結果を踏まえて、前バージョンとの相違点などを述べます。
当方ハナハダシイ初心者でありますので、マチガイなど有りましてもご容赦ください。


Bitmap(画像URL)での画像表示

▲[ 目次 ]


CreateJSの特徴として、以前から下記の様に、Bitmap(画像URL)形式で画像を簡単表示でき、結構便利な機能です。
Html5 Canvasでの画像処理は「完全に読み込み済み」が条件なため、ImageLoaderクラスなどで読み込めるかチェックしてから取り込めます。以前の欠点を補えます。


チェックしないで表示(従来の方法)


● 同じドメイン画像の場合
画像があれば表示します。無ければ、または読み込みに失敗すれば表示しません。失敗は稀です。
(画像取得失敗な異常事態ではHTMLも表示しないでしょうから...........)


var welcomeImage;
welcomeImage=new createjs.Bitmap("/main/images/yakei.png");

● クロスドメイン画像の場合
必ずしも表示はしませんので注意ください。大きさ取得が出来なく、色々とCanvas処理での不都合が発生します。
そのためクロスドメイン画像はCanvasでは処理しないのが一応原則です。
preloadjs-0.6では「より一層不都合」に成るようにされています。(不都合キャンペーン実施中)


実行しなければ結果は判らない。


var welcomeImage;
welcomeImage=new createjs.Bitmap("http://pops-web.com/main/images/yakei.png");

● 画像ローダークラスで画像読み込み出来るかチェックする (または取得する)
色々なローダークラスが追加になりましたが、ほとんどがリスナーのイベント種類「complete」しか持っていません。読み込み可能かの「チェック機能」であることに注意ください。(イベント設定でevent.result値を取得することも可能です)
イベントがcompleteならば、表示出来る判定で処理する。completeに成らないなら実行はしません。


しかるに、ImageLoaderクラス使用の際にもリスナーのイベントの種類は「complete」しか有りませんので注意ください。しかし、以前より格段と便利になりました。


【参考】fumiononaka.comの記事: PreloadJS 0.6.0: ImageLoaderクラス

【参考】jsdo.itの記事: EaselJS 0.8.0: Loading a image with the ImageLoader


チェックして表示(新しい方法)


● チェックする 1、階層を指定してBitmap挿入。
チェックとは言っても通信を行っているために、通信に成功していればブラウザ内部的にキャッシュはなされていて、下記例では瞬時にBitmap()に取り込まれエラーなど無く処理される仕組みと成るそうです。


preferXHRはfalseです。同じドメイン画像の場合の説明です。



var welcomeImage;
welcomeImage=new createjs.Bitmap();//空のBitmapを配置
stage.addChild(welcomeImage);

//画像ローダークラスでチェック
var bkloader=new createjs.ImageLoader("/main/images/yakei.png",false);
bkloader.addEventListener("complete",function() {
	welcomeImage.image=new createjs.Bitmap("/main/images/yakei.png").image;
});
bkloader.load();
-----------------------
大きさは「同じドメインの画像」なので下記の様に取得できる
横幅=welcomeImage.width;
高さ=welcomeImage.height;

● イベント設定で画像result値を取得
但し、「同じドメイン画像」のみです。この場合イベントresult値より、画像の大きさ取得も可能です。
クロスドメイン画像は イベントresult値 または、Bitmap値 より大きさの取得が出来ない場合もあるので注意。(「クロスオリジン」設定次第では大きさの取得が出来ることもあるが、取得してみないと判らない)



//画像ローダークラスで画像result値を取得
var bkloader=new createjs.ImageLoader("/main/images/yakei.png",false);
bkloader.addEventListener("complete",function(event) {
	welcomeImage.image=new createjs.Bitmap(event.result).image;
});
bkloader.load();
-----------------------
「同じドメインの画像」ならば大きさ取得も可
横幅=event.result.width;
高さ=event.result.height;

● チェックする 2、ロード次第で表示。
下記の場合は、チェックをしますが、画像階層を事前に設定していませんので、他のコンテンツと重なり順が合わなくなる可能性があります。また上記の様にイベント設定で画像result値の取得も可能です。

画像表示目的ならば、一番利用価値がある。



var welcomeImage;
//画像ローダークラスでチェック
var bkloader=new createjs.ImageLoader("/main/images/yakei.png",false);
bkloader.addEventListener("complete",function() {
	welcomeImage=new createjs.Bitmap("/main/images/yakei.png");
	stage.addChild(welcomeImage);
});
bkloader.load();

● loadFileでチェックする 3、ロード次第で表示。
下記の場合は、completeでのチェックはresult値を取得出来ないが、fileloadイベント設定でなら従来通り画像 result値 の取得も可能です。
同じドメイン画像なら、LoadQueue()は false true どちらでも機能するが、false が良いと思います。
下記のように、loadFile()は「fileloadリスナー」を設定出来ます。



//loadFileで判定
var bkloader=new createjs.LoadQueue(false,"","");//false true
bkloader.loadFile("/main/images/yakei.png");
//eventはcompleteでは拾えない
bkloader.addEventListener("complete",function() {
	welcomeImage.image=new createjs.Bitmap("/main/images/yakei.png").image;

});
bkloader.load();
-----------------------
//fileloadでは拾える
bkloader.addEventListener("fileload",function(event) {
	welcomeImage.image=new createjs.Bitmap(event.result).image;

});

但し、上記例は、同じドメイン画像の場合に限ります。


● TagRequestクラスでチェックする 4、ロード次第で表示。
event直接画像の取得は出来ないようです。<img />で表示しているに過ぎませんので、クロスドメイン、CakePHPサイトでも関係なく表示出来ます。大きさは同じドメインに限りBitmap()より算出出来ます。TagRequestの役割はキャッシュしているだけです。



//TagRequest判定
var bkloader=new createjs.LoadQueue(false,"","");
var tag_request=new createjs.TagRequest({src:"/main/images/yakei.png",crossOrigin:""},"<img />","src");
//completeのみ設定、event直接画像の取得はできない
bkloader.addEventListener("complete",function(event){
	welcomeImage.image=new createjs.Bitmap("/main/images/yakei.png").image;
});
bkloader.load();

一応機能するが、最良の方法かは判らない。モット良い方法があれば教えてください。


JavaScript new Image()オブジェクトでチェック読み込みの場合 (従来の方法)

画像ローダークラス(ImageLoader)の無かった従来の方法で、以前は皆この方法で処理しました。
これはクロスドメイン画像の場合でも読み込み出来ますが「不都合」が出ますので注意ください。
作り方を変えれば如何様にも成りますし、LoadQueueクラスで読み込む前に、画像を配置したい場合、または画像が少ない場合などには有効な手段になります。

Image()オブジェクト利用は、どうしても必要である「家庭の事情」がある時です。
クロスドメイン画像取得、大きさ取得が簡単ですから、旨く組み合わせて使用するのがコツでが、そのあと「地獄」が待っています。



var backfile="/main/images/yakei.png";
var welcomeImage;
welcomeImage=new createjs.Bitmap();//空のBitmapを配置
stage.addChild(welcomeImage);
//画像読み込み
var img=new Image();
img.onload=function() {
	var bmp=new createjs.Bitmap(img);
	welcomeImage.image=bmp.image;
}
img.src=backfile;
-----------------------
大きさは「ドメイン」に関係なくonload出来れば、下記の様に取得できる
横幅=img.width;
高さ=img.height;

汎用にするならば、次のようにもなる
画像を読み込めないならば、代替画像(Canvasエレメント)を挿入、作り方はアイデア次第。
複数を時間の間隔無く設定しないでください、別画像を表示する恐れがあります。

空のBitmapを配置、インスタンスを指定して、ロード次第Bitmapを流し込む。



var backfile="/main/images/yakei.png";
var welcomeImage;
welcomeImage=new createjs.Bitmap();//空のBitmapを配置
stage.addChild(welcomeImage);

//インスタンス指定、画像エラー処理/エラー処理は限定/#6496ED
loadImageCheck(welcomeImage,backfile,640,640,"#376D99");
-----------------------
//インスタンス指定画像読み込みBitmap挿入
function loadImageCheck(instance,url,w,h,bkcolor){
	var _instance=instance;
	var bmp;
	var img=new Image();
	img.onload=function() {
		bmp=new createjs.Bitmap(img);
		_instance.image=bmp.image;
	}
	img.onerror=function() {
		bmp=new createjs.Bitmap(createColorCanvas(w,h,bkcolor));
		_instance.image=bmp.image;
	}
	img.src=url;
}
-----------------------
//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

 

 

LoadQueueクラスでの画像表示

▲[ 目次 ]


さて、本題のLoadQueueクラスでの処理方法ですが、AbstractLoaderクラスを継承した形の、LoadQueueクラスになりましたので少々設定が違って来ます。
以前のバージョンで書かれたものも読み込み処理が出来るように配慮されていますので、そのままでも支障は出無いとは思いますが、以下の点が違います。


AbstractLoaderクラス、(抽象ローダー)

ファイル個別にローダークラスを設けたのでそれを統括するクラスのようです。それで抽象的なローダーなのでしょう。

LoadQueue()はAbstractLoaderクラス継承になり、新たにクロスオリジン指定(Anonymous)が出来るようにユーザーの要望により追加された。
つまり、自動で読み込み用エレメントに crossOrigin="Anonymous" を付与する仕組みになった。

クロスオリジン指定は「クロスドメイン」用ですから、通常は関係が有りません。


AbstractLoaderクラス継承

LoadQueueクラスは、AbstractLoaderクラス継承になりましたので、タイプ指定の方法が変わりました。


Manifest利用の複数ファイルのロード


LoadQueue(true)とLoadQueue(false)の違い


従来のeaseljs-0.7.1では、ほぼ全員が LoadQueue(false) で処理して来たと思います。
HTMLタグ形式(TagLoader)、XMLHttpRequestで読み込みのどちらかの選択でしたが、皆HTMLタグ形式を選択。



loader=new createjs.LoadQueue(false);//easeljs-0.7.1

easeljs-0.8.0 複数画像一括ロードを例にとれば、manifestを用意して、通常以下の様になるが振る舞いが違います。



//Loaderを作る
loader=new createjs.LoadQueue(trueまたはfalse);
.
.
//manifest読み込み開始
loader.loadManifest(manifest);

● easeljs-0.8.0 の画像処理の場合 1、(同じドメイン、manifest利用)


1. LoadQueue(false)、HTMLタグ形式の読み込みを実行、失敗すればXMLHttpRequestで読み込む。
但し、LoadQueue(false) ではerror処理を実行しません(以前の処理と違う)。これは現実的ではない。
2. LoadQueue(true)、XMLHttpRequestで読み込む。
LoadQueue(true) ですとerror処理を実行します。現実には LoadQueue(true) が良いことになります。
error処理を必要としない場合はfalseでも良い。
3. fileerrorは「同じドメイン」ではほとんど出無いと思います。Manifest処理が停止するので、それをスキップします。(fileloadもスキップしますから、ループで言えば next のようなもの)


● easeljs-0.8.0 の画像処理の場合 2、(クロスドメイン、manifest利用)


IE以外はクロスドメイン画像を読み込み出来ません。
1. IE以外は、LoadQueue(true)、XMLHttpRequestで処理しないとうまく行きません。
(「クロスオリジン」の設定とfileerrorイベント処理が必要ですし必ず取得出来るかは判りません、少々簡単なTagRequestを使用する設定もあります、むしろImage()処理した方が利口かも知れません)
2. IEは、LoadQueue(false)、HTMLタグ形式の読み込み指定 false で処理します。
(IEはXMLHttpRequestを使用せず、クロスドメインでも関係なく読み込みますから問題なく取得します)
下記別項目、IEと「クロスドメイン画像」、を参照ください。


LoadQueue(true)が標準になります


個人的には従来の easeljs-0.7.1記述のJS は、LoadQueue(true) に変更したほうが良いと思います。



LoadQueue(XHRの選定,ファイルまでのパス,クロスオリジン)

//Loaderを作る
loader=new createjs.LoadQueue(true);
-----------------------
上記設定は下記と同じです
loader=new createjs.LoadQueue(true,"","Anonymous");

LoadQueueの引数は標準では true に成ります。XMLHttpRequest処理でロードする設定になります。
クロスオリジン(Anonymous)は「クロスドメイン」用ですから、通常の「同じドメイン」画像処理ではクロスオリジン設定の必要がないので無視されます。


大きな変更のひとつは、ローダーの構成を変えたことです。これまでのバージョンは、内部的にXMLHttpRequest(XHR)とHTMLタグベースのふたつのローダーを用いていました。新しいPreloadJSでは、コンテンツごとにその形式に応じたローダを使います。(下記より引用)

【参照】fumiononaka.comの記事: PreloadJS 0.6.0: 新たな個別ローダーの仕組み


AbstractLoaderクラス継承とタイプ指定

LoadQueueクラスは、AbstractLoaderクラス継承になりましたので、タイプ指定の方法が変わりました。typeを指定すると読み込みが早くなるそうです。画像なら、



以前の指定は非推奨になりました(現在のバージョンでは使用できます)
type:createjs.LoadQueue.IMAGE

代わりに以下の様になります
type:createjs.AbstractLoader.IMAGE

タイプ指定とmanifestリスト


● 標準では次の様にmanifest利用で記載実行する手順です。
エラー対処なら true 設定で無ければ「error」リスナーは機能しません。



//画像manifestリスト
var manifest=[
	{id:0,src:"/main/images/flight01.jpg",type:createjs.AbstractLoader.IMAGE},
	{id:1,src:"/main/images/flight02.jpg",type:createjs.AbstractLoader.IMAGE},

	略す
];
//Loaderを作る/エラー対処ならtrue設定
loader=new createjs.LoadQueue(true);

//loader EventListener設定
略す

//Manifestを使用、manifest読み込み開始
loader.loadManifest(manifest);

● 1画像 manifestリストは書き方に注意します。[ ] を使用しているので間違わないように。



loader=new createjs.LoadQueue(true);
//Manifestを使用
loader.loadManifest([{id:0,src:"/main/images/flight01.jpg",type:createjs.AbstractLoader.IMAGE}]);
-----------------------
ファイル名だけの場合

loader.loadManifest(["/main/images/flight01.jpg"]);

LoadQueueの引数



LoadQueue(preferXHR, basePath, crossOrigin)
LoadQueue(XHRの使用,ファイルまでのパス,クロスオリジン)

クロスオリジン指定は「クロスドメイン」用ですから、通常は関係が有りません。
preferXHRは、XMLHttpRequest処理の指定ですが、上記の「error処理」を考慮すれば、余り意味のないものになってしまいます。XMLHttpRequest処理優先で「true」にして使用するのが標準という訳ですかネ。


標準ではtrue設定


下記の様に明示的にすると良い、Anonymous は使用しません
loader=new createjs.LoadQueue(true,"","");

読み込みタグにAnonymousを自動で処理する
loader=new createjs.LoadQueue(true,"","Anonymous");

LoadQueueでクロスオリジン指定クロスドメイン画像読み込み方法は難しいので、専門家の記事など参照ください。
(2015/02/現在参考記事は皆無です)


「ファイルまでのパス」にマチガイがあれば basePath は無視されるようです。たとえばローカルでのテスト中、NETの「自分のドメイン画像」を表示したつもりが「ローカル画像」の表示だった。などが起こり得ますので注意。


エラー処理とLoadQueueの引数

▲[ 目次 ]


Manifest利用を利用している場合ですが、

画像、error処理 (以前からのerrorです) をする場合は LoadQueue(true) にしないと処理してくれない。

LoadQueue(fase)で、画像読み込みでトラブルがあった場合、ロード途中で スクリプトは停止 します。
「error処理関数」があっても機能しませんし「fileerrorリスナー」でスキップも出来ません。一生涯そのままです。



● error処理をしている場合、trueであること
loader=new createjs.LoadQueue(true);
-----------------------
● error処理をしない場合は以下でも動作するが、URLなどにミスがあれば停止する
false設定では、fileerrorリスナーも効きません

loader=new createjs.LoadQueue(false);

よって、従来のeaseljs-0.7.1のJSは、LoadQueue(true) に変更したほうが良いと思います。


● デモでの記載例、EventListener設定は on() で行っています。
easeljs-0.7.1までは、長い間、LoadQueue(false) の設定でしたので、そのまま false でも動きます。


下記はeaseljs-0.8.0「デモ」の例で同じドメイン画像ですがエラー処理のため、true に設定しています。



//bulk-load、画像一括ロード
function bulkload() {

	//Loaderを作る
	loader=new createjs.LoadQueue(true,"","");

	//progress設定
	loader.on("progress",progress);

	//EventListener設定
	loader.on("fileload",fileload);
	loader.on("error",error);
	loader.on("complete",complete);

	//manifest読み込み開始
	loader.loadManifest(manifest);

}

● クロスドメイン画像はIE以外は読み込みません。

Manifest処理で、クロスドメイン画像はIE以外は読み込まずに停止します。クロスドメイン画像は完全に閉め出されました。個別ローダーなどでの読み込みは一部可能ですが、ほとんど方法がなくなりました。


どうしても必要な場合はImage()オブジェクトを利用します。Image()オブジェクトでの画像読み込み表示



IE以外は false true 共に読み込まない
loader=new createjs.LoadQueue(true);//false true 共にNG

IEは false で読み込む
loader=new createjs.LoadQueue(false);//falseのみ

loadFileクラス

▲[ 目次 ]


書式、マニュアルより


loadFile (file [loadNow=true] [basePath])

file LoadItem | Object | String

画像であれば、画像URL、LoadItem、Objectなどの引数を利用できるようになっています。LoadItem、が追加された。

LoadItemは、この下で説明の「LoadItemクラス」を参照ください。


1つのファイルを読み込む場合に使用します。以前と変わり有りません。最後にload()を忘れぬように書いてください。



//Loaderを作る/falseまたはtrue
loader=new createjs.LoadQueue(false,"","");
loader.loadFile("画像URL");
loader.on("fileload",function(event){
	//処理を書く
});
//読み込み実行
loader.load();
-----------------------
書き方は色々
loader.loadFile("画像URL");
loader.loadFile({id:"image",src:"画像URL"});
loader.loadFile({id:0,src:"画像URL",type:createjs.AbstractLoader.IMAGE});

音楽ファイル mp3など
loader.loadFile({src:"音楽ファイルのURL", type:createjs.AbstractLoader.SOUND});

個別ローダーは主に「completeイベント」のみですが、loadFileクラスの組み合わせると、「fileloadイベント」が利用できる場合があります。視覚的に判り易いだけです。(個別ローダーによっては違いはあると思いますが)
尚、個別ローダーによっては、event.result値が取り出せない場合も有ります。
(説明が少なくて、個別ローダーのスクリプトを読まないと判らないから、この辺大変です)



xxloader.addEventListener("fileload",function(event){
	//値がない場合もあるので注意
	var result=event.result;
});

カスタムローダーとloadFileクラスの組み合わせ

カスタムローダーなどもloadFileクラスと組み合わせて使用する場合があります。
少し改造していますが、カスタムローダーサンプル参照ください。Image()オブジェクトでの画像読み込み表示


loadItemクラス

▲[ 目次 ]


今までファイル(画像ふくむ)などロードする際に指定してきた、ファイル名、オブジェクトなど一括して管理する仕組みのようです。ファイルをロードする際に必要なプロパティー初期値が登録されています。
ロードする条件など受け渡す際に有効な手段になるからでしょう。また動的に変えられることも可能なので時には便利に成るのでしょう。
LoadItem().set()は記載の値が「上書き」されるとの事です。


【参考】当方の記事: PreloadJS 0.6.0: 読込みにwithCredentialsとheadersを定める


プロパティーは以下の様に、各個別ローダークラスなどで利用するものになっています。
callback,crossOrigin,data,headers,id,loadTimeout,maintainOrder,method,type,mimeType,src,values,withCredentials



//loadItemを作り設定利用する
var loadItem=new createjs.LoadItem().set({src:"image.png", type:createjs.AbstractLoader.IMAGE});
loader.loadFile(loadItem);

//オブジェクトで設定
loader.loadFile({src:"image.png", type:createjs.AbstractLoader.IMAGE});

//ファイル名で指定も利用できます
loader.loadFile("image.png");

個別ローダーの利用

▲[ 目次 ]


各種ローダークラスが用意されましたので、使用する時点で「チェック」しながら実行すればより効率が良く処理でき、
「Manifestでの画像一括読み込み」とは分離した方が「Manifest読み込み完了」を待たずに 処理出来る から使い易いと言う事でしょう。画像などを例にとれば以下の様になる。
各種ローダークラスはマニュアルを参照ください。ほとんどのファイル専用のローダークラスが用意されています。



//画像ローダークラスでチェック

var ローダーアイテム=new createjs.ImageLoader(画像URL,false);
ローダーアイテム.addEventListener("complete",function(event) {

	読み込み可能な場合の処理を書く

});
ローダーアイテム.load();

ImageLoaderローダークラスを単独で利用する例です、イベント設定で画像result値を取得して、Bitmapに流しこみます。エラー処理がないのが残念です。
下の例では、LOADO完了後に処理していますので、表示だけではなく各種の処理が可能となります。



//空のBitmap
welcomeImage=new createjs.Bitmap();
stage.addChild(welcomeImage);

//画像ローダークラスで画像result値を取得
var bkloader=new createjs.ImageLoader("/main/images/yakei.png",false);
bkloader.addEventListener("complete",function(event) {
	//表示だけでなく、下記以上の加工などできる
	welcomeImage.image=new createjs.Bitmap(event.result).image;
});
bkloader.load();

個別ローダーのイベントリスナーの設定でDataなど受け渡ししないので注意とのことです。

【参照】fumiononaka.comの記事: PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す


fileerrorイベント

新たに fileerrorイベント が加わりました。従来のエラーは errorイベント に成ります。
XMLHttpRequest処理で何らかの特別なXHR内部エラーが発生すると、Manifest処理などが途中で停止します。
fileerrorイベントのリスナーを設定すると、fileload 処理をも「スキップ」して停止する、Manifest処理が正常に働きます。画像を読み込んでいるか否かは「ブラウザ」のコンソールをみれば判ります。ChromeならF12キーを押す。


fileerrorイベントリスナーの中は何も書いていなく、無ければ「Manifest処理」などが「継続」されないので注意ください。
(中に書いても現在は何も実行しないようです、今後のことは不明です)

「fileerrorイベント」のリスナーを設定の場合、従来の「errorイベント」は機能しません。いずれか1つの設定か。


loadFile()と組み合わせた場合に状態によっては、fileerrorイベントが有効でなく、errorイベントで正常になった事例があります。AbstractLoaderクラス継承などで処理が変わっているのが原因か、この辺も考慮ください。

組み合わせにより、リスナーの制御がloadFile()側に移ったということでしょうか。その時点で色々試みなければ機能しない場合も有り得そうです。


Manifest処理で無ければ「fileerror」は起こりませんので通常の「error」で処理可能です。


fileerrorイベントのリスナーを設定


loader.addEventListener("fileerror",fileerror);
または
loader.on("fileerror",fileerror);

function fileerror (event) {
	//何も書いていない
}

manifestリストの利用

画像の場合は「複数枚」読み込みが多く、manifestリストの利用が多いと思います。画像以外のファイルと混合も以前通り出来ます。
タイプをきっちりmanifest記載した方が、処理が早くなるそうです。私は面倒だから書かないタイプです。



//画像manifestリスト
var manifest=[
	{id:0,src:"/main/images/flight01.jpg"},
	{id:1,src:"/main/images/flight02.jpg"},
	{id:2,src:"/main/images/flight03.jpg"},
	{id:3,src:"/main/images/flight04.jpg"},
	{id:4,src:"/main/images/flight05.jpg"},
	{id:5,src:"/main/images/flight06.jpg"}
];
-----------------------
typeは次のようになる
type記述が無くとも読み込みは可能です、現実は記載ない場合が多い

var manifest=[
	{id:0,src:"/main/images/flight01.jpg",type:createjs.AbstractLoader.IMAGE},

	略す

];

manifestリストは別に「JSONファイル」として保存しておいて、ロードして利用することも可能です。
上記のようなManifesの書式で外部jsonファイルとして保存すれば良いだけです。外部ファイルで更新できると言う事。
マニュアルより転載



loader.loadManifest("path/to/manifest.json");
loader.loadManifest({src:"manifest.json", type:"manifest"});

リスナー設定はon()、off()が推奨されています。

リスナーをon()で設定するのは制御し易いからです。off()で機能を停止できますし this を使用できるのが強みです。
Manifest以外のものは、loadFile()で追加すればよい。この場合progressに自動で追加され、loadManifest(manifest)で共にload()されます。



//bulk-load、画像一括ロード
function bulkload() {

	//Loaderを作る/エラー対処ならtrue設定
	loader=new createjs.LoadQueue(true);
	//全体、progressがあれば先に設定
	loader.on("progress",progress,this);

	//他にもloadFile読み込み可能
	//loader.loadFile({src:"/main/images/xxxxx.jpg",id:8});

	//loader EventListener設定
	loader.on("fileload",fileload);
	loader.on("error",error);
	loader.on("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

on()書式での設定が便利なので、出来るだけ使用するよう推奨されている。
(addEventListenerが無くなる訳ではありません)



loader.on("error",error);
loader.off("error",error);

画像の大きさの取得

画像の大きさは、下記の様に、event.result値が取得出来る場合に限り、大きさを求めることが出来ます。
ImageLoaderクラスでは、completeイベントより取得可能です。但し、クロスドメイン画像でエラー、設定の組み合わせ違いなどでevent.result値を取得出来ない場合も有ります。



ローダーアイテム.addEventListener("fileload",function(event) {
	横幅=event.result.width;
	高さ=event.result.height;
});

クロスオリジン設定がなされているサイトの場合 (ほとんど無いと思います)

通常は余りないと思いますが、下記の様にアクセス先のサイトの.htaccessファイルにクロスオリジン設定の許可がなされている場合は、「クロスドメイン画像」であっても通常の画像取得が可能になります。

「クロスドメイン画像」は「同じドメイン画像」として扱われますので、問題は何ら発生しません。


仮にアクセス先のサイトに対して、許可の .htaccessファイル を置いてくれと願っても無理な話です。
サービス用のサーバーでは許可している場合もあるそうです。


アクセス先のドメインの.htaccess設定、(自分のサイトでは有りません)


.htaccessファイルなどにAllow-Originの記載がなされている
Header set Access-Control-Allow-Origin "*"

Header set Access-Control-Allow-Origin "許可先のドメイン"
など

異なるドメイン間の通信

信頼出来る「ドメイン」ならば下記の様に.htaccessファイルを設定すれば、ドメインの問題を気にすることなく通信可能です。

あくまでもで信頼出来る「ドメイン」である事が条件ですから、同じオーナーなら利用できます。実際にためしてみますと、画像もドメイン画像と扱いが同等なりイベントなどへの影響は無い。


.htaccessファイル記載


原則は相互に許可する、http://hoge.com、http://hage.com、ドメイン間の通信
setが旨く行かない場合はappendにすると良い

http://hoge.comの設定
Header set Access-Control-Allow-Origin "http://hage.com"
または
Header append Access-Control-Allow-Origin "http://hage.com"

http://hage.comの設定
Header set Access-Control-Allow-Origin "http://hoge.com"
または
Header append Access-Control-Allow-Origin "http://hoge.com"

「クロスドメイン画像」の影響

「クロスドメイン画像」の影響はバージョンを重ねる毎に大きくなっています。原則利用しない事ですが、Flickr画像の場合は生かし方無いし、必要に迫られることもある。但し、その後は地獄がまっています。


1. clickイベントなどが効かなくなるので構造を変えたり、clickイベント部分を完全に分離しなければならない。
2. それでも影響がある場合は、enableMouseOver()を無効にすると防げる。効果絶大。
(enableMouseOverが無いのでそれなりの設計をすること)
3. preloadjsを読み込まないで処理すると影響が半減する(画像はImage()で読み込める)。
4. 画像を含むShape()にイベントを設定しない。時にはBitmap()でのイベント設定が無効の時もある。
5. beginBitmapFill()で「クロスドメイン画像」を流しこまない。
6. 何ヶ月も何年もひたすら考える。
7. 笑神様にお布施、供え物(お神酒、スルメ、ワカイオンナ)をして護摩を焚き祈祷、土俵入りを奉納する。


「クロスドメイン画像」の大きさが取得出来ない場合がある

一般的に下記の様にリスナーのevent.result値から取得しますが、取得出来ない場合も有ります。
画像キャッシュが有りますから、メモリー上でBitmap()化して大きさを取得します。(addしないこと)

最初から Image() で読み込んだ方が効率的ではないかといったら、その通りです。



通常なら取得できるが、
loadar.addEventListener("fileload",function(event) {
	横幅=event.result.width;
	高さ=event.result.height;
});
-----------------------
var bmp=new createjs.Bitmap(画像URL);
横幅=bmp.image.width;
高さ=bmp.image.height;

IEと「クロスドメイン画像」

IEは「クロスドメイン画像」であっても「クロスドメイン」の区別は有りませんので、ほとんど通常の画像の様に取得出来ると思います。クロスオリジン設定も関係無く自由自在です。当然画像以外のファイルも取得出来ます。

読み込めても「クロスドメイン」画像であるから、問題が発生します。よって何ら意味の無いことになります。


XMLHttpRequest処理を指定しないで、原則、通常処理の LoadQueue(false) で取得できます。
false設定ですから、preloadjs-0.6では、基本的にエラーに対処出来ませんので注意。


IE、manifestリスト利用の場合


IE、クロスドメイン画像であってもfalse設定で読み込める
loader=new createjs.LoadQueue(false);//OK

但し、色々とローダーなど組み合わせた場合に LoadQueue(true)の方が良い場合も稀に有ります。組み合わせで発生した例外でしょう。(少し理解し難い所も出ることあり、色々試してみないと判らない)。


IE以外、manifestリスト利用の場合


IE以外、false true 設定どちらとも読み込めない

loader=new createjs.LoadQueue(false);//NG
loader=new createjs.LoadQueue(true);//NG

● IE系統は manifestリスト で読み込めるが、IE以外は「タグ指定読み込み」がブラウザで拒否され読み込めません。
ローダーそのものが機能しませんので停止します。



//画像manifestリスト
var manifest=[
	{id:0,src:"http://xxx.com/images/xxxxx0.jpg"},
	{id:1,src:"http://xxx.com/images/xxxxx1.jpg"},

	略す
];

//bulk-load、画像一括ロード
function bulkload() {

	//Loaderを作る
	loader=new createjs.LoadQueue(false,"","");

	//EventListener設定
	loader.on("fileload",fileload);
	loader.on("complete",complete);

	//manifest読み込み開始
	loader.loadManifest(manifest);

}

以下の様にしますと、IE共にエラー画像ですが、ローダーが停止しません。
img指定のTagRequestになったようですが、読み込めません(キャッシュのみ)のでローダーを停止しないだけの効果です。



loader=new createjs.LoadQueue(true,"","");//falseはエラー対処が出来ない
//以下でクロスも停止しない、但し画像はエラー画像
var img_tag=document.createElement("img");
loader.setTag(img_tag);

//エラーerror
function error (event) {
	//エラー文字挿入画像をassets容器に保存
	assets.push(errorImage);
}

TagRequestとXHRRequestクラス

▲[ 目次 ]


TagRequestクラスおよびXHRRequestクラスを単独に使用する場合の例です。
資料なども無く、完全に正確かは不明ですが一応機能します。今後修正する場合もありますので了解ください。


TagRequestで画像の読み込み

TagRequestは、<img />、<script />、限定です。

「クロスドメイン」画像で在っても問題は有りませんが、「クロスドメイン」画像は直接大きさの取得が出来ないので単に表示させるだけになる。(徹底してクロスドメイン画像を嫌っている感じ、事情はわかりますが、....)
複数画像読み込みなら、繰り返すように作れば良い。
上記、Image()オブジェクトの方が現実的。JavaScript new Image()オブジェクトでチェック読み込みの場合



//TagRequest判定
var trloader=new createjs.LoadQueue(false,"","");
var img_url="/main/images/yakei.png";
var tag_request=new createjs.TagRequest({src:img_url,crossOrigin:""},"<img />","src");
//completeのみ設定、event直接画像の取得はできない
trloader.addEventListener("complete",function(event){

	//クロスドメイン画像は大きさの取得が出来ない
	var bmp=new createjs.Bitmap(img_url);
});
trloader.load();

一応機能するが、最良の方法かは判らない。


XHRRequest、番外

XHRRequestではあるが、次の様に取得可能である。正しいかは判らないがブラウザに関係なく画像はほぼ取得する。(Flickrでのテストでは一番効率が良い)
但し、manifest利用は出来ないので複数画像は同じ処理を繰り返す。同じドメインならfalseでも機能するがエラーは機能しないのでここではtrueに設定している。
大きさは、Firefox、Chrome、OKだが、IEは取得出来ないのでImage()で大きさ取得し補正することになる。

Flickrでは一番効率が良いが、どのようにしてもエラーが出るのでImage()で大きさ取得し補正することになる。

今時は、クロスドメインで見知らぬドメインにXHRリクエストしても拒絶される。単なるテスト目的であるから画像に関してはスコブル非効率的である。


XHRRequest利用実際のFlickr画像表示デモ (createJS119c.js)、Flickrではエラーが出るので、見ても修正など多いため効率悪く参考にもならないので使用する予定は無い。

一応動作しています、そんな程度です。: Flickr画像表示デモ


XHRRequesの概略、クロスドメインでは余り意味が無い。


//XHRRequest、一応動作するようだ
var loader=new createjs.LoadQueue(true,"","");
loader.loadFile({id:ID番号,src:画像URL});
var xhr=new createjs.XHRRequest(loader);

//リスナー、complete/fileload
loader.addEventListener("fileload",function(event){

	//画像はほぼ取得する
	var result=event.result;

	//サイズ取得Firefox.Chrome OK/IE大きさ取得できない
	横幅=result.width;
	高さ=result.height;

	大きさ取得できない場合はImage()で補正

});
//error
loader.addEventListener("error",function(event){
	//Image()で画像および大きさ取得
});
loader.load();
-----------------------
IEはこちらが無難だクロスドメインは関係ない、大きさは取得できない、falseでエラーは機能しない
詳しくは言えないがMac関連もこちらが良いのではと予測します

var loader=new createjs.LoadQueue(false,"","");
loader.loadFile({id:ID番号,src:画像URL});
loader.load();
----------------------
browserIEはブラウザ判定IEなら true

//Flickr一番よいようだ
if(!browserIE) {
	var loader=new createjs.LoadQueue(true,"","");
	var xhr=new createjs.XHRRequest(loader);
}
if(browserIE) {
	var loader=new createjs.LoadQueue(false,"","");
}
loader.loadFile({id:[imageload_count],src:flickrthumbs[imageload_count]});

一応機能するが、最良の方法かは判らない。間違っているかも全て不明である。正確な事は今後出るだろう専門家情報を参考にして下さい。(期待するが、100年待っても出ないかも知れない)
Flickrプラグインなど主流はjQueryであり、直接HTML表示か読み込みはImage()であり、スコブル簡単である。


XHRRequest判定用
同じドメイン用ですが、ここまでして利用する人はいないでしょう。但し機能はするが正しいかなどは不明です。
LoadQueue(false)でも実行可能です。


//XHRRequest判定ドメイン用 必要性が無い
//ブラウザにより大きさ取得できない 同ドメインで IE11 Chrome Firefox OK
var bkloader=new createjs.LoadQueue(true,"","");//true
bkloader.loadFile({src:"/main/images/yakei.png"});
var xhr=new createjs.XHRRequest(bkloader);
bkloader.addEventListener("fileload",function(event){
	welcomeImage.image=new createjs.Bitmap(event.result).image;

});
bkloader.load();

クロスドメイン画像をも読み込むので、一応機能していると考える、最良の方法かは判らない。


Image()オブジェクトで画像を読み込む基本形

基本的には次の様になる、エラー処理も可能です。



//Image()オブジェクト画像読み込み
var img=new Image();
img.onload=function() {
	//読み込み完了の処理を書く
}
img.src=画像URL;

画像読み込みエラーに代替画像を挿入して処理する

通常、画像の読み込み「エラー処理」を行っている方は余り居ません。私の場合画像処理の状況にもよりますが、「エラー処理」を行っている事が多い。(読み込み出来ないことはほとんど無いのですが...)
大半は、代替画像を挿入しています。同じ大きさのCanvasエレメントを作って入れている。


Html5 Canvasでは、画像処理は「完全ロード済み」が絶対条件で有り、重大な「JSエラー」に繋がることが有る(Firefox)。最悪他のJSまで停止する事もある。よって、必要に応じてだが「JSエラー」を回避するようにしています。


余り起こり得ない事なのでエラー処理をするかしないかは個人の自由である。強制するものでは有りません。



loader.on("error",error);
------------------
//エラー
function error (event) {
	//var id=event.item.id;
	//エラー画像をassets容器に保存
	assets.push(createColorCanvas(canvasWidth,canvasHeight,"#888888"));

}
------------------
//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

デモのJS参照ください。


progressの必要性

従来、私の感覚ではprogress表示は、単なる「装飾」でありましたが、LoadQueue()が複雑になれば、ロード状況の確認に必要です。特に「クロスドメイン」処理の場合はスクリプトの設定ミス解決の目安になります。


新しいローダー、LoadQueueクラスの仕組みは出来たばかり

まだ出来たばかりで、今後、修正、追加など有る事と思います。
CreateJSは結構「仕様」が変わりますので、その時に「大騒ぎ」しましょう。
マニュアルに余りサンプルなどが無いので、各々のクラスファイルを読んで考えるしか方法は無いようです。キツイ


 

Image()オブジェクトでの画像読み込み表示

▲[ 目次 ]


複数画像読み込みなら、あれこれ悩むより「Image()オブジェクトのプラグイン」の利用が簡単です。クロスドメインには関係なく読み込めます。


色々と組み合わせて調べましたが、LoadQueueクラスでのmanifest利用の複数クロスドメイン画像表示はIEを除き出来ないと思います。つまりmanifest無しで、1つ読み込んだら次と、複数回実行する。
CreateJSのカスタムプラグインの作成例として、Image()オブジェクト読み込み表示のサンプルが、DOWNLOADした「PreloadJSフォルダ」に掲載されています。
エラーに対処していないので少し改造しました。LoadQueueクラスで組み合わせて使えるのはこれのみでした。

プラグインですから、ローダーインスタンスを作れば複数回利用できるのが良い点です。説明は「デモページ」参照


カスタムプラグイン画像表示(Image()使用)

CreateJS easeljs-0.8 LoadQueueカスタムプラグイン画像表示 (createJS119b.js)

demo


 

Image()オブジェクトで読み込みの繰り返し

Image()オブジェクトで1画像ずつ読み込みを繰り返し、エラーの場合は代替画像を挿入するループを作れば複数画像も読み込めます。
「同じドメイン」「クロスドメイン」の区別無く使用でき、大きさの取得が簡単です。


詳細は、上記「カスタムプラグイン画像表示デモページ」または「下記ページ」参照ください。


【参照】当方の記事: CreateJS FlickrAPI「タグ入力画面」付きのタグ検索とImage()クロスドメイン画像表示


「クロスドメイン」画像を使用するのはマチガイです

そもそも、Html5 Canvas処理では、影響があるので「クロスドメイン」画像を扱わないようになっています。
(ブラウザが規定により「クロスドメイン」画像を使用出来ない様に操作しています)
「クロスドメイン」画像である「Flickr」をCreateJSで表示すること自体「マチガイ」であり「阿呆」そのものと言える。
「前ページ」などでテスト的に表示していますが、jQueryなどで処理、Html表示したほうが簡単かつ効率的と思います。


どうしても「家庭の事情」などの理由で読み込まなければ成らないなら、上記記説明の、Image()オブジェクトを利用したほうが良い。また不都合が各所に出ますので適正に「ゴマカシ」処理しなければならない。(構造を変えたりと結構大変)


クロスドメイン画像を、Image()オブジェクトで読み込む実際例 (マチガイな例です)


Image()クロスドメイン画像表示の記事、読み込みは遅い。

【参照】当方の記事: CreateJS FlickrAPI「タグ入力画面」付きのタグ検索とImage()クロスドメイン画像表示

Image()オブジェクトでの画像読み込み管理プラグインを使用した例。読み込みが早い。

【参照】当方の記事: CreateJS FlickrAPI LoadManager読み込みタグ検索画像表示

Image()オブジェクトでの画像読み込み管理プラグインの頒布先と説明。おすすめです。

【参照】clockmaker.jp: HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」


XMLHttpRequest(XHR)

▲[ 目次 ]

CreateJS LoadQueueクラスでのXMLHttpRequest(XHR)に関しての詳細、正確な情報は、今後出て来ると思いますのでそれを参考にしてください。(何年たっても出ないかも知れない............)


Flickrおよび通常の違うサイトに対しても設定を変えたりして、「クロスドメイン」画像テストをしましたが、全てエラーで画像取得はなりませんでした。余り知識がないので良く判らないのが本音です。
専門家などの詳しい方の情報を待つしかないようです。新たに良い方法など見つかれば、後日、別途記事にします。


クロスオリジン指定時のAnonymous設定付与の自動化

CreateJSではCanvas処理ですので、画像はローダーで読み込みますからエレメントの場所が不明で、Htmlのタグの様に自由に、クロスオリジンの crossOrigin="Anonymous" 設定付与は出来ませんでした.....。


ユーザーの要望もあり、preloadjs-0.6より指定があれば自動で設定なるようにされました。
CreateJSでは、preloadjs-0.6より、画像なら document.createElement("img") など読み込み用のタグを作ったときにクロスオリジンの付与をしています。自動でしてくれるので、fileloadリスナーからresult値が取り出せます。
この辺、当方詳しくは有りませんので、今後の出てくるだろうNETでの関連記事などを参考になさってください。


JavaScript、XMLHttpRequestの実践的な記事は次を参考参照ください。

【参考】hakuhin.jpの記事: JavaScriptプログラミング講座【XMLHttpRequestについて】

【参考】uhyohyo.netの記事: JavaScript初級者から中級者になろう

【参考】memopad.bitter.jpの記事: AJAX-XMLHttpRequestオブジェクトの作成


LoadQueueクラスでのFlickr画像の読み込みは困難

▲[ 目次 ]

通常簡単に表示すべく画像でありながら、ファイルエラー「header contains multiple values」が結構でる。

「Flickr」画像毎に保存されているドメインが違い、XMLHttpRequest、または、XHRRequest単独でも、どのようにしてもエラーが発生する。それを補正するために、Image()処理での再読み込みに時間がかかり非効率的です。
よってデモなどは無意味なので、省略します。つまり、Image()処理単独で画像取得したほうが問題が無い。

こちらが便利、上記、カスタムプラグイン画像表示(Image()使用)、参照ください。


以上は全てテストの結果です

専門家ではないために、いつもながら、詳細などの解説は出来ません。資料などまだ皆無の状態ですからマチガイがありましたらご容赦ください。



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]