f8g

JavaScriptで空間フィルタリング

Javascript

あるピクセル(V0.0)と周囲のピクセルとフィルタ行列を掛けて、それらの合計をV0.0のところに置くようなやつ。
Photoshopでは5*5, 7*7も高速にやれるけど、さすがにJavaScript/Canvasでは3*3でも遅い。

イメージ

V-1.-1 V0.-1 V1.-1
V-1.0 V0.0 V1.0
V-1.1 V0.1 V1.1

掛ける

f-1.-1 f0.-1 f1.-1
f-1.0 f0.0 f1.0
f-1.1 f0.1 f1.1

の和
(分かりづらい)

シャープ

var flt = [
	[ 0, -1,  0],
	[-1,  5, -1],
	[ 0, -1,  0]
];

http://gyazo.com/74b74409e07e6c1254b6b2cb7ae24878.png

ぼかし

var flt = [
	[0.08, 0.12, 0.08],
	[0.12, 0.2 , 0.12],
	[0.08, 0.12, 0.08]
];

http://gyazo.com/68a3622240004de80a0c0e3dc376b76b.png

輪郭抽出

var flt = [
	[1,  1, 1],
	[1, -8, 1],
	[1,  1, 1]
];

http://gyazo.com/bf01d18db5f65190fe656fd978e497e0.png

エンボス

var flt = [
	[1, 0,  0],
	[0, 0,  0],
	[0, 0, -1]
];
// offsetが128

http://gyazo.com/054a3b09226607521a5b19f7a51c338b.png

その他

http://arikui.s101.xrea.com/test/canvas/cg/test/filter.html
色々できる用。ソースコードなど。

Canvasから画像データが取得できるそうです

http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html

img.src = canvasElement.toDataURL();

Firefoxでも。Canvasは凄いなー。