Almost all images and photographs we come across are colored images. But for simplicity of algorithms most image processing algorithms are based on gray images (single channel). Even though colors play an important role in giving humans a true feel for images when it comes to details gray images and color images preserve the same amount of luminance and variation terms of details. Therefore even though the color information is lost, by converting an image to grayscale the details are still preserved.

When converting an image to grayscale all three channels of R,G,B needs to be at the same level.There are three basic algorithms to convert color images to grayscale. I have included the three approaches with the results when using each of the approaches.

Lightness Approach The Lightness approach involves in getting a mid point of the brightest level to the darkest. NewPixelValue = (Max(R,G,B) + Min (R,G,B))/2 Average Approach Averaging deals with getting an average value for the new pixel and assigning it to all three R,G,B Levels of the new pixel to make the resulting image grayscale. NewPixelValue = (R + G + B)/3 Luminosity Approach Luminosity approach is similar to averaging, it uses a weighted average to provide higher significance to the green channel. Humans perceive green better therefore the luminosity approach assigns a higher weight for green. The weights can be assigned as below NewPixelValue = 0.21R + 0.71G + 0.07B

Implementation in HTML 5

Basic Structure

For basic HTML image processing a canvas element is used. The canvas allows to display our processed images. Code for a basic setup of a canvas is shown below.

HTML

<html> <head> </head> <body> <canvas id="canvas" width="216" height="225"></canvas> ... </canvas> </body> </html>

Accessing Pixel Data

Once an image is been drawn in a canvas its raw pixel data can be accessed, and iterated using the code below.

Javascript

<script type="text/javascript"> // Obtaining the canvas reference var theCanvas = document.getElementById("myCanvas"); // Getting a reference 2D var context = theCanvas.getContext('2d'); var imageData=context.getImageData(0,0,216,225); for (var i=0;i<imageData.data.length;i+=4) { ... } </script>

Implementing the algorithms

The approaches I mentioned above can be implemented as follows.

Lightness Approach

// Function to capture a pixel and modify the pixel function lightnessMethod(imageData,i) { var newValue=(MaxMin("max",imageData[i],imageData[i+1],imageData[i+2])+ MaxMin("min",imageData[i],imageData[i+1],imageData[i+2]))/2.0; imageData[i]=newValue; imageData[i+1]=newValue; imageData[i+2]=newValue; return imageData; } // Function to find the Max/Min of three values function MaxMin(type,val1,val2,val3) { switch(type) { case "max": { var max=val1; if (max<val2) { max=val2; } if (max<val3) { max=val3; } return max; } case "min": { var min=val1; if (min>val2) { min=val2; } if (min>val3) { min=val3; } return min; } } }

Average Approach

// Function to capture a pixel and modify the pixel function averageMethod(imageData,i) { var newValue=(imageData[i]+imageData[i+1]+imageData[i+2]+imageData[i+3]); imageData[i]=newValue/3.0; imageData[i+1]=newValue/3.0; imageData[i+2]=newValue/3.0; return imageData; }

Luminosity Approach

// Function to capture a pixel and modify the pixel function luminosityMethod(imageData,i) { var newValue=(0.21*imageData[i]+0.71*imageData[i+1]+0.08*imageData[i+2]); imageData[i]=newValue; imageData[i+1]=newValue; imageData[i+2]=newValue; return imageData; }

Image reference : http://www.proprofs.com/quiz-school/story.php?title=what-kind-parrot-are-you_2