Filtrowanie obrazów – ściemnienie (HTML5 canvas)

Filtrowanie – ściemnienie

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

Listing

function sciemnienie(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 = 0.7;
	for (var i = 0; i < data.length; i += 4) {
		data[i] = data[i] *factor;
		data[i + 1] = data[i+1] * factor;
		data[i + 2] = data[i+2] *factor;
	}
	ctx.putImageData(imageData, imageX, imageY);
};
var image = new Image();
image.src = "images/pies.jpg";
image.crossOrigin = "Anonymous";
image.onload = function() {
	sciemnienie(this);
};