ETERNITY DESIGN BLOG

PreloadJSで画像をロード その1 [CreateJS]

今回は、PreloadJSで画像をロードし、Canvas上にグレースケールフィルタを適用して配置してみます。

デモはこちら

過去2つのエントリーでは、特にコードの解説もありませんでしたが、今回はコード中に簡単にコメント入れておきました。
まぁ、やってることはシンプルなので。

PreloadJSのLoadQueueクラスがロードを担当するクラスです。

外部ドメインの画像をロードすることも可能ですが、その場合、フィルターの適用が出来ないので、今回は同一ドメイン上の画像をロードしています。
これは、ASのBitmapDataでdrawできないのと、同じ考えなんでしょうか。

今回からCreateJS各種コードがアップデートされています。
EaselJS 0.6.1
PreloadJS 0.3.1

以下、Main.jsコードです。


function Main() {
	this.canvas;
	this.stage;
	this._width = 500;
	this._height = 500;

	this.init();
}

Main.prototype.init = function() {
	this.canvas = document.getElementById('ed_ver5');
	this.resizeEvent();

	this.stage = new createjs.Stage(this.canvas);

	// PreloadJSのLoadQueueクラス
	var queue = new createjs.LoadQueue(false);
	queue.addEventListener("fileload", delegate(this.handleFileLoad, this));

	// 画像ファイルのロード
	// 他ドメインのからのロードも可能だけど、フィルタの適用が出来ない。
	// queue.loadFile({id:"image", src:"http://pics.campl.us/f/c/cb4c28c51271b8de10c4c54fd7dd82be-2135055019.jpg"});
	queue.loadFile({id:"image", src:"./images/sample.jpg"});
}

Main.prototype.setBitmap = function(img) {
	var w = img.naturalWidth;
	var h = img.naturalHeight;
	var bitmap = new createjs.Bitmap(img);

	var matrix = [
		0.298912, 0.586611, 0.114478, 0, 0,
		0.298912, 0.586611, 0.114478, 0, 0,
		0.298912, 0.586611, 0.114478, 0, 0,
		0, 0, 0, 1, 0
	];

	bitmap.filters = [new createjs.ColorMatrixFilter(matrix)];
	bitmap.cache(0, 0, w, h);

	bitmap.x = (this._width - w) * 0.5;
	bitmap.y = (this._height - h) * 0.5;
	this.stage.addChild(bitmap);

	this.stage.update();
}

Main.prototype.handleFileLoad = function(e) {
	this.setBitmap(e.result);
}

Main.prototype.resizeEvent = function() {
	this._width = $('body').innerWidth();
	this._height = $('body').innerHeight();

	this.canvas.width = this._width;
	this.canvas.height = this._height;
}

function delegate(func, scp) {
	var dlgt = function() {
		return func.apply(scp, arguments);
	}

	dlgt.func = func;
	dlgt.scp = scp;

	return dlgt; 
}

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS