Ładowanie obrazu i jego przetwarzanie

Witam serdecznie

Mam pytanie: Ładuję obraz poprzez ten skrypt:

window.onload = function() {

		var fileInput = document.getElementById('fileInput');
		var fileDisplayArea = document.getElementById('fileDisplayArea');


		fileInput.addEventListener('change', function(e) {
			var file = fileInput.files[0];
			var imageType = /image.*/;

			if (file.type.match(imageType)) {
				var reader = new FileReader();

				reader.onload = function(e) {
					fileDisplayArea.innerHTML = "";

					var img = new Image();
					img.src = reader.result;

					fileDisplayArea.appendChild(img);
				}

				reader.readAsDataURL(file);	
			} else {
				fileDisplayArea.innerHTML = "File not supported!";
			}
		});

}

Obraz oczywiście jest wyświetlany na stronie po załadowaniu itd.
Pytanie brzmi: co zrobić aby na załadowany obraz zastosować efekty typu sepia,b&w itp. typu CSS? i obraz przerobiony również wyświetlić?

To nie jest Java, chociaż w nazwie tego języka jest Java ;)

google:
js css apply - ustawianie styli css przez js
css filters - filtry dostępne w css ( nie wspierane przez IE - http://caniuse.com/#search=filter )
canvas filters example - jak na elemencie <canvas> z html5 zastosować filtry