Pobieranie danych obrazu (HTML5 canvas)

Pobieranie danych obrazu

Mamy obraz ukryty w elemencie img.

Pobieramy obrazek.

Wyświetlamy obrazek na płótnie.

Pobieramy dane obrazka przy użyciu funkcji getImageData().

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;
	};