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:
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"
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:
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
# 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