Filtrowanie obrazów – kontrast (HTML5 canvas)

Filtrowanie – kontrast

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

	function newInt(n, factor){
		var x = n * factor;
		return x > 255 ? 255 : x;
	};
	function cont(n, factor){
		return (n < 128) ? n/factor : newInt(n, factor);
	}
	function kontrast(img) {
		var cv = document.getElementById("canvas");
		var ctx = cv.getContext("2d");
		//położenie obrazka na canvas
		var imageX = 10;
		var imageY = 10;
		//pobranie obrazka
		//var img = document.getElementById("aniolek");
		//wymiary obrazka
		var imageW = img.width;
		var imageH = img.height;
		//odrysowanie obrazka
		ctx.drawImage(img, imageX, imageY);
		//pobranie danych obrazka
		var imageData = ctx.getImageData(imageX, imageY, imageW, imageH);
		var data = imageData.data;
		var factor = 1.15;
		for (var i = 0; i < data.length; i += 4) {
			data[i] = cont(data[i], factor);
			data[i + 1] = cont(data[i+1], factor);
			data[i + 2] = cont(data[i+2], factor);
		}
		ctx.putImageData(imageData, imageX, imageY);
	};
	var image = new Image();
	image.src = "images/pies.jpg";
        image.crossOrigin = "Anonymous";
	image.onload = function() {
		kontrast(this);
	};