Pobieranie danych 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;
		//pobranie danych wskazanego piksela
		//koordynaty x i y są koordynatami w obrębie obrazka i jego pobranych 
		//danych, a nie względem kontekstu.
		//piksele są liczone 0,1,2,3,4 ...
		//tablica ma indeksy 0,1,2,3 ...
		var x = 99;
		var y = 99;
		var red = data[((imageW * y) + x) * 4];
	    var green = data[((imageW * y) + x) * 4 + 1];
	    var blue = data[((imageW * y) + x) * 4 + 2];
	    var alpha = data[((imageW * y) + x) * 4 + 3];
	  //wyświetlanie danych pierwszego piksela
		ctx.fillText("Dane piksela(99, 99): ", 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);
	};

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *