Convert a Color Image to Grayscale
Manipulate images for business or pleasure effortlessly with LiveCode
By Hanson Schmidt-Cornelius
This lesson describes how to convert a color image into grayscale using widely accepted conversion constants. Sample code and example screen captures are provided.
Introduction
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.
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.
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.
This is part one of a three part series on Vision. At the end of the series, we will publish a sample stack for you to take apart.
|
About the Author
Hanson Schmidt-Cornelius is an experienced software developer with an interest in artificial intelligence.
|
|