javascript - Looping through pixels in an image -

my project input image canvas tag in html page, , loop through pixels , rgba values of pixels. while looping through red values,so every fourth value in pixel, want log position of pixels represent white pixel. now, have image loading down code got blog, http://www.phpied.com/photo-canvas-tag-flip/ .

he has post in gives code on how loop through pixels , log information want log, don't understand it, , don't want copy code without knowing i'm doing. please either explain method he's using or perhaps show me way he's doing? link other post http://www.phpied.com/pixel-manipulation-in-canvas/ .

it's straightforward.

all pixel data canvas stored sequentially in array.

the first pixel's data occupy array elements #0-3 (red=0/green=1/blue=2/alpha=3).

the second pixel's data occupy array elements #4-7 (red=4/green=5/blue=6/alpha=7).

and on...

you can load pixel data using context.getimagedata() , enumerating through array.

var imgdata = context.getimagedata(0,0,canvas.width,canvas.height); var data = imgdata.data;  // enumerate pixels // each pixel's r,g,b,a datum stored in separate sequential array elements  for(var i=0; i<data.length; i+=4) {   var red = data[i];   var green = data[i+1];   var blue = data[i+2];   var alpha = data[i+3]; } 

you can change array values , save array image using context.putimagedata().

// save altered pixel data context // image reflect changes made  context.putimagedata(imgdata, 0, 0); 

the image change according changes made pixel array.