Vision: How do I Convert a Color Image to Grayscale?
This lesson describes how to convert a color image into grayscale using widely accepted conversion constants. Sample code and example screen captures are provided.
Vision is possibly the most important human sense. It allows us to observe and assess the environment around us with a wealth of color, texture and depth information. We can act upon this information in a seemingly effortless fashion, but the processes that underlie human vision and visual perception are in fact far from fully researched or understood.
A lot of computer image processing can and is conducted on gray level pictures as this simplifies the implementation of many algorithms. Gray level images provide a wealth of information but at the same time eliminate the need to handle color channels. Of course there are a number of applications that do utilize color in images.
The algorithm described in this lesson converts color images to grayscale by calculating a gray level for each pixel and setting the three color channels for that pixel to the value calculated. This effectively converts a color image to grayscale, but it also allows us to add color to image regions, if we wish to do so in the future.
Creating the Image Area
Create a New Mainstack and drag an Image Area onto it. This is the location in which the image will be displayed. Then open the Property Inspector and set the name of the Image Area to Image.
You also have to create the custom property cHiddenImageData for the Image Area. This is used in a subsequent lessons in which it is necessary to have a copy of the image that is being updated.
Creating the Load Image Button
Drag a button onto the new stack. Then open the Property Inspector and change the name of the button to Load Image. Next, open the Script Editor for this button and insert the following code:
on mouseUp answer files "Select the image you wish to load:" with type "JPEG Images|jpg|JPEG" set the filename of image "Image" to it set the cHiddenImageData of image "Image" to the imageData of image "Image" end mouseUp
This button allows you to open Joint Photographic Experts Group images for processing.
Note: Update the type information in the code if you would like to be able to load other image types too.
Creating the Convert to Grayscale Button
Drag a button onto the new stack. Then open the Property Inspector and change the name of the button to Grayscale. Next, open the Script Editor for this button and insert the following code:
on mouseUp local tPixel, tImgPosition, tGray, tImage put the imageData of image "Image" into tImage # repeat for all the pixels in the image repeat with tPixel = 0 to (height of image "Image" * width of image "Image") - 1 # multiply the image pixel position by 4 (Alpha + Red + Green + Blue) put tPixel * 4 into tImgPosition # calculate the gray level - we are using typical weights here put 0.30 * charToNum (char (tImgPosition + 2) of tImage) + \ 0.59 * charToNum (char (tImgPosition + 3) of tImage) + \ 0.11 * charToNum (char (tImgPosition + 4) of tImage) into tGray # set the RGB of the pixel to the same value this gives us the gray level put numToChar (tGray) into char (tImgPosition + 2) of tImage put numToChar (tGray) into char (tImgPosition + 3) of tImage put numToChar (tGray) into char (tImgPosition + 4) of tImage end repeat # assign the updated image data back to the displayed image set the imageData of image "Image" to tImage set the cHiddenImageData of image "Image" to tImage end mouseUp
Loading an Image
Your application may look something like the one shown in this example. After selecting the Load Image button you should get a file selection dialog that allows you to select an image from your file system. The image is then displayed in the Image Area.
Processing an Image
The color image is converted from color to grayscale by selecting the Grayscale button.
Note: Depending on the size of the image and the processing power of your computer, this may take a few seconds.