Get first and last row of pixels using imageData

Question

I'm currently looping through a canvas element's imageData pixel array. I want to loop through the first (top) row and the last (bottom) row of pixels. How do I do this?

This is how i'm looping through the entire pixel array:

        //Var declarations, etc.
        imageData = context.getImageData(0, 0, cols, rows);

        for (var i = 0, max = imageData.data.length; i < max; i+=4) {

           //This is looping through the entire array.
        }

Nate · Accepted Answer · 2016-06-20 18:21:12Z

5

One way is to get the top row and bottom row individually and then loop through them:

imageDataTop = context.getImageData(0,0,cols,1);
imageDataBottom = context.getImageData(0,rows-1,cols,1);

More info here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

answered Jun 20, 2016 at 18:21

Nate

661 silver badge1 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get first and last row of pixels using imageData

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related