Question

When I getImageData() from a canvas, I get an ImageData object, with a Data sub-object, which is a clamped array. I want to check if every pixel I get is white (and not transparent). In other words, I want to check if every value in the data object is equal to 255. The obvious code would be the following:

if (data.every(function(value) {return value == 255})) {
    //Do something
    }

But for some reason it won’t work in clamped arrays, as the following minimal code shows:

var DATA = new Uint8ClampedArray(3);
//var DATA = new Array

DATA[0] = 255
DATA[1] = 255
DATA[2] = 255
DATA[3] = 255

alert(DATA.every(function(value) {return value == 255}))

Any solutions? Thanks!

Answer 1

You could extend the prototype of Uint8ClampedArray with an every() function, which can be taken from the Array prototype; then your code will work fine.

Uint8ClampedArray.prototype.every = Array.prototype.every;

I guess this is the easiest way to do it, but note that it will break the for ... in loop (which shouldn’t be used to iterate over arrays anyway…).