Iteracja po danych obrazu
Dane są w tablicy 1-wymiarowej. Każde 4 elementy tablicy dotyczą kolorów (r,g,b,a) jednego piksela.
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); } } };