ImageDataを直接扱えるクラス

• Reporter: tsugehara
• Owner: (None)
• Type: Feature Requests
• Status: Closed
• Component: (None)
• MileStone: (None)
• Priority: 5 - Medium
• Severity: 5 - Medium
• Resolution: None
• File: None

Details Reply

速度重視のフレームワークなので、ImageDataを直接扱えるクラスがあってもいい。フレームワーク組み込みかモジュールかはどちらでも。

以下プロトタイプ。

class Pixel extends E {
	imageData: ImageData;

	constructor(width:number, height:number, srcImage?:any) {
		super();
		this.x = 0;
		this.y = 0;
		this.width = width;
		this.height = height;
		var canvas = window.createCanvas(this.width, this.height);
		var context = canvas.getContext("2d");
		if (srcImage) {
			context.drawImage(srcImage, 0, 0);
		}
		this.imageData = context.getImageData(0, 0, this.width, this.height);
		this.disableTransform = true;
	}

	clear(r?:number, g?:number, b?:number, a?:number) {
		if (r === undefined)
			r = 0;
		if (g === undefined)
			g = 0;
		if (b === undefined)
			b = 0;
		if (a === undefined)
			a = 0;
		for (var i=0, len=this.imageData.data.length; i<len; i+=4) {
			this.imageData.data[i] = r;
			this.imageData.data[i+1] = g;
			this.imageData.data[i+2] = b;
			this.imageData.data[i+3] = a;
		}
	}

	draw(context:CanvasRenderingContext2D) {
		context.putImageData(
			this.imageData,
			this.x,
			this.y
		);
	}
}

プロトタイプを使ってみた感じ結構速くていい感じ。回転とかは出来ないけど。

Ticket History (3/3 Histories)

2013-03-12 16:33 Updated by: tsugehara

• New Ticket "ImageDataを直接扱えるクラス" created

2013-03-12 16:42 Updated by: tsugehara

Comment Reply

srcImageはEのがいいかも。

2013-03-17 22:01 Updated by: tsugehara

• Status Update from Open to Closed
• Ticket Close date is changed to 2013-03-17 22:01

Comment Reply

r64 にて対応。ただしかなり使いにくい。 srcImageはEとHTMLCanvasElement、HTMLImageElement、HTMLVideoElementに対応可能、という仕様にした。