DevPinoy.org
A Filipino Developers Community
   
How To: Convert an Image to Grayscale

Geee! it's been more than a month since I last posted something in this blog. I have been really really busy this past few weeks with a huge project and a gragantuan task which made it really hard for me to write anything that is interesting.

Anyway, I have been coding crazy as always when i found out that one of the Image Buttons in my project is missing a grayscale hover image. Whats crazy is that i didn't have Photoshop in my PC that time. The detail-oriented guy inside of me made the decision that i should have that image created because it is bothering me whenever i hover on an empty image placeholder.

And so, I was of to the races... Coding for just a mere button... After a couple of minutes I was able to convert the image to grayscale... with one problem... the button looks different from it's fellow buttons... Oh well! another useless idea :P

The complete Windows Application took a little over 5 minutes. Take a look at the core function below:

private Image ConvertImageToGrayScale(string sourceImageLocation)
{
   Image sourceImage = null;
   Bitmap bmp = null;
   try
   {
      //lets read our image
      sourceImage = Image.FromFile(sourceImageLocation);
      bmp = new Bitmap(sourceImage);

      //iterate through the pixels of the image starting from 0,0
      for (int xCoordinate = 0; xCoordinate < bmp.Width; xCoordinate++) {
         for (int yCoordinate = 0; yCoordinate < sourceImage.Height; yCoordinate++) {
            Color color = bmp.GetPixel(xCoordinate, yCoordinate);
            Color replacementColor = GetReplacementColor(color);

            //set the replacement color in the specified x and y coordinate
            bmp.SetPixel(xCoordinate, yCoordinate, replacementColor);
         }
      }

      sourceImage = (Image)bmp;
   }
   catch (Exception ex){
      string message = ex.Message;
      bmp.Dispose();
   }

   //return our grayscale image
   return sourceImage;
}

private Color GetReplacementColor(Color color)
{
   int redShade = (int)color.R;
   int blueShade = (int)color.B;
   int greenShade = (int)color.G;
   int shade = (redShade + blueShade + greenShade) / 3;
   return Color.FromArgb(shade, shade, shade);
}


Posted 12-05-2006 4:51 PM by keithrull

Comments

cruizer wrote re: How To: Convert an Image to Grayscale
on 12-05-2006 5:22 PM

keith, wrong formula. the intensity of the grayscale pixel should be:

Y = 0.3 R + 0.59 G + 0.11 B

where R = red, G = green, B = blue and Y = intensity or luminance.

:)

lamia wrote re: How To: Convert an Image to Grayscale
on 12-05-2006 11:01 PM

Very straightforward! I didn't have time to study the formula but I think it should work quite right when ported to Java. :)

keithrull wrote re: How To: Convert an Image to Grayscale
on 12-05-2006 11:31 PM

Thanks cruizer, i think i need to change my formula then!

hehehe! i didn't have much time to research the proper formula, all i wanted to do was make my images gray :P

yeyi wrote re: How To: Convert an Image to Grayscale
on 12-06-2006 3:23 AM

Another quick way is to use a colormatrix with imageattributes. Although some may argue that the grayscale is not pure =P

Here's a snippet from Bob Powell's GDI+ site.

Image img = Image.FromFile(sourceImageLocation);

       Bitmap bm = new Bitmap(img.Width,img.Height);

       Graphics g = Graphics.FromImage(bm);

ColorMatrix cm = new ColorMatrix(new float[][]{   new float[]{0.3f,0.3f,0.3f,0,0},

                                 new float[]{0.59f,0.59f,0.59f,0,0},

                                 new float[]{0.11f,0.11f,0.11f,0,0},

                                 new float[]{0,0,0,1,0,0},

                                 new float[]{0,0,0,0,1,0},

                                 new float[]{0,0,0,0,0,1}});

ImageAttributes ia = new ImageAttributes();

       ia.SetColorMatrix(cm);

       g.DrawImage(img,new Rectangle(0,0,img.Width,img.Height),0,0,img.Width,img.Height,GraphicsUnit.Pixel,ia);

       g.Dispose();

modchip wrote re: How To: Convert an Image to Grayscale
on 12-06-2006 11:10 PM

Ummmm.... so this is what's like in Photoshop under the hood when I grayscale my images... Nice to know. :) Thanks guys!

frequency wrote re: How To: Convert an Image to Grayscale
on 11-28-2007 4:55 AM

Y = 0.3 R + 0.59 G + 0.11 B

formula ,,, can any one explain me why the G component in the greay scale is greater then the red and the blue component .

frequency wrote re: How To: Convert an Image to Grayscale
on 11-28-2007 4:56 AM

Y = 0.3 R + 0.59 G + 0.11 B

can any one tell me why the Green component is higher then blue or green compoment .?

Gaurav wrote re: How To: Convert an Image to Grayscale
on 12-13-2007 1:18 AM

Hi can anybody please tell me how can i get rotation of point of image

anon wrote re: How To: Convert an Image to Grayscale
on 02-07-2008 10:46 PM

it has to do the way the human vision works in the eye. Our fovea

is more sensitive to green, then red, last blue.

EggNuts wrote re: How To: Convert an Image to Grayscale
on 10-30-2008 5:36 AM

No the formula is correct, you use average methode, grayscale have 2 methode average and sory i'm forget..maybe more faster if you use code from marshal class with lockbits (read MSDN)

Anna wrote re: How To: Convert an Image to Grayscale
on 07-26-2009 10:58 PM

Hi. Will this work in silverlight 2?

Anna wrote re: How To: Convert an Image to Grayscale
on 07-26-2009 11:08 PM

Hi. Will this work in Silverlight 2?

Copyright DevPinoy 2005-2008