Processing images on the web!

For the colour values, we can process it in different ways. Here’s an example of how to turn an image grayscale:

data[i] = data[i+1] = data[i+2] = 0.2126 * r + 0.7152 * g + 0.0722 * b; //CIE luminance that matches the brightness level of our eyes.

It’s basically a piece of math, isn’t it? In here I’ll show you some effects’ math equivalents that you can apply to your code easily.

1. Grayscale
data[i] = data[i+1] = data[i+2] = 0.2126 * r + 0.7152 * g + 0.0722 * b
2. Sepia (old-style brownish worn-away)
data[i] = 0.393 * r + 0.769 * g + 0.189 * b;
data[i+1] = 0.349 * r + 0.686 * g + 0.168 * b;
data[i+2] = 0.272 * r + 0.534 * g + 0.131 * b;
3. X-Ray (also called invert)
data[i] = 255 - r;
data[i+1] = 255 - g;
data[i+2] = 255 - b;
4. Brightness
var amt; //The brightness value
data[i] = r + amt;
data[i+1] = g + amt;
data[i+2] = b + amt;
5. Contrast
var level; //The contrast level
level = Math.pow((level+100)/100,2); //Map the linear value to an exponential curve to make the change in contrast bigger
data[i] = ((r/255-0.5)*level+0.5)*255;
data[i+1] = ((g/255-0.5)*level+0.5)*255;
daa[i+2] = ((b/255-0.5)*level+0.5)*255;

We’ll talk about more effects later. Stay tuned and practice more on this!