f8g

JavaScriptで濃度変換

Javascript

1pxごとに何らかの関数を与えて, 明るさなどを変える。セピアやグレースケールもこの類だと思います。
IronRubyのやつ http://d.hatena.ne.jp/arikui/20070918/1190050541

元画像

http://gyazo.com/f205c7180f61f25718ad6ffef9fc2244.png

明るさ調整

var _f = function(n){
	return function(x){ return x + n; };
};
var f = _f(50);

http://gyazo.com/014d2abf8e971bc651ed0569610bbe0b.png

色調反転

var f = function(x){
	return 255 - x;
};

http://gyazo.com/3da50e67c646fb46df0e367552cf1586.png

レベルスライス

var f = function(x){
	if(x <= 64) return 0;
	if(x > 191) return 0;
	return 128;
};

http://gyazo.com/e97588a4cefee533d2e613417013bb6f.png

階調化

var f = function(x){
	return parseInt(x / 32) * 32;
};

http://gyazo.com/2dc3b091e5161e669bd47ed551282e22.png

ガンマ補正

var _f = function(n){
	return function(x){ return 255 * Math.pow(x / 255, n) };
};
var f = _f(1/4);

http://gyazo.com/bb62c5f80007537530294c3fe192150c.png

その他

http://arikui.s101.xrea.com/test/canvas/cg/
色々できる用。

Firefoxの話

ブックマークのコメントで知ったんですが、FirefoxでもPixel操作できるそうです。
http://delicious.com/url/6a01bd77fc64fe07c27100fae4d89e37
http://www.html5.jp/canvas/ref/method/getImageData.html

var imageData = ctx.getImageData(x, y, 1, 1);
alert(imageData.data); // [r, g, b, a]で出力 (ただし、aは0から255)

こっちの方が使いやすい感じはするけど、アルファがCanvasっぽくない。.NETなんかとは一緒みたいだけど。