monochrome.js

function monochrome(src) {
	var d = new Deferred;

	var img = new Image;
	img.src = src; // must same domain
	img.onload = function() {
		var w = img.width;
		var h = img.height;
		var _canvas = $('<canvas width="'+w+'" height="'+h+'" class="photo">');
		var _context = _canvas[0].getContext('2d');
		var canvas = _canvas.clone()[0];
		var context = canvas.getContext('2d');

		_context.drawImage(img, 0, 0);
		var _image = _context.getImageData(0, 0, w, h);
		var image = context.createImageData(w, h);
		for (var y = 0; y < h; ++y) {
			for (var x = 0; x < w; ++x) {
				var p = (y * w + x) * 4;
				var _d = _image.data;
				var g = (_d[p + 0] * 2 + _d[p + 1] * 4 + _d[p + 2]) / 7; // http://ofo.jp/osakana/cgtips/grayscale.phtml
				var data = image.data;
				data[p + 0] = g;
				data[p + 1] = g;
				data[p + 2] = g;
				data[p + 3] = _d[p + 3];
			}
		}
		context.putImageData(image, 0, 0);
		return d.call(canvas);
	};
	return d;
}