Looping through image pixels

Question

My project is to inject an image into the canvas tag on an HTML page, and then scroll through the pixels and RGBA values ​​of the pixels. Pulling through the red values, so that every fourth value in the pixel, I want to record the position of the pixels representing the white pixel. Now I have an image loaded with the code that I got from this blog, http://www.phpied.com/photo-canvas-tag-flip/ .

He has another entry in which he gives some code on how to move around the pixels and write down the information that I want to register, but I don’t understand it, and I don’t want to copy his code, not knowing what I am doing . So could someone either explain the method that he uses or show me another way to do what he does? This is a link to another entry http://www.phpied.com/pixel-manipulation-in-canvas/ .

Answer 1

It's simple.

All pixel data for the canvas is stored sequentially in an array.

The first pixel data is occupied by the elements of array # 0-3 (red = 0 / green = 1 / blue = 2 / alpha = 3).

The second pixel data is occupied by the elements of array # 4-7 (red = 4 / green = 5 / blue = 6 / alpha = 7).

And so on...

You can load this pixel data with context.getImageData () and list through an array.

var imgData = context.getImageData(0,0,canvas.width,canvas.height); var data = imgData.data; // enumerate all pixels // each pixel r,g,b,a datum are 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 also change these array values ​​and then save the array back to the image using context.putImageData ().

 // save any altered pixel data back to the context // the image will reflect any changes you made context.putImageData(imgData, 0, 0); 

Then the image will change in accordance with the changes you made to its pixel array.

Answer 2

I recommend using the image processing infrastructure to focus on algorithms rather than manipulating arrays of values. Some frameworks:

• fabric.js
• processing.js
• Marvinj

In the case of MarvinJ, you can simply scroll the pixels repeating the columns and the coordinates of the rows. I use getIntComponentX () methods to access the color components.

 for(var y=0; y<image.getHeight(); y++){ for(var x=0; x<image.getWidth(); x++){ var red = image.getIntComponent0(x,y); var green = image.getIntComponent1(x,y); var blue = image.getIntComponent2(x,y); } } 

Therefore, you do not need to worry about how pixel data is represented. To check if a pixel is white:

 // Is white? if(red >= 250 && blue >= 250 && green >= 250){ console.log("Pixel at "+x+","+y+" is white"); } 

Runnable Example:

 var canvas = document.getElementById("canvas"); image = new MarvinImage(); image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded); function imageLoaded(){ var whitePixels=0; for(var y=0; y<image.getHeight(); y++){ for(var x=0; x<image.getWidth(); x++){ var red = image.getIntComponent0(x,y); var green = image.getIntComponent1(x,y); var blue = image.getIntComponent2(x,y); var alpha = image.getAlphaComponent(x,y); // Is white? if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){ whitePixels++; } } } image.draw(canvas); document.getElementById("result").innerHTML = "white pixels: "+whitePixels; } 

 <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> <canvas id="canvas" width="500" height="344"></canvas> <div id="result"></div>