Iteracja po danych obrazu (HTML5 canvas)

Iteracja po danych obrazu

Dane są w tablicy 1-wymiarowej. Każde 4 elementy tablicy dotyczą kolorów (r,g,b,a) jednego piksela.

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

Listing

	window.onload = function() {
		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;
		//iteracja po danych
		var j = data.length;
		for (var i = 0; i < j; i += 4) {
			var red = data[i];
			var green = data[i + 1];
			var blue = data[i + 2];
			var alpha = data[i + 3];
			if (i == 0) {
				//wyświetlanie danych pierwszego piksela
				ctx.fillText("Dane pierwszego piksela: ", 340, 20);
				ctx.fillText("red: " + red, 340, 40);
				ctx.fillText("green: " + green, 340, 60);
				ctx.fillText("blue: " + blue, 340, 80);
				ctx.fillText("alpha: " + alpha, 340, 100);
			}
		}
	};