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!

Leave a Reply

Your email address will not be published. Required fields are marked *