Image Processing Part 1 Grayscaling using HTML5


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.

  1. Lightness Approach
  2. 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

    1301032220_small Lightness
  3. Average Approach
  4. 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

    1301032220_small Average
  5. Luminosity Approach
  6. 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

    1301032220_small Luminosity

 

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

About these ads

One thought on “Image Processing Part 1 Grayscaling using HTML5

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s