Divide an conquer! That’s what I always say. But how do you go about dividing an image up into it’s separate channels–like Photoshop does it?
There are actually two ways to go about doing it. First, is displaying the actual amount of red, green, or blue that is contained in each pixel which results in images that are made up entirely of shades of the color channel that you are viewing. The second is to to simply display the information in an easily understood visual representation by using shades of grey. Both are detailed below.
Grey Channels
The color channel selected will be displayed in a shade of grey. The darker the pixel is, the less of the color the pixel contains.
 |
 |
 |
 |
| Original | Red | Green | Blue |
|---|
And Grey:
To achieve this, we loop through all the pixels in the image, and make the new pixel, only the value of that color. So, imagine there is a pixel in a shade of orange (#DE4E21). If you separate that channel out in to it’s RGB values, you get rgb(222, 78, 33). So, when separating out the channels, the new pixel for the red channel would only contain 222, or rgb(222, 222, 222), which is a shade of grey.
The code below also contains an “N” channel. This is just the name I gave to an all grey channel. The greyscale code is from someone named Indy, who I can only assume is the Indiana Jones of PHP.
$f = $_GET['f'];
$channel = $_GET['channel'];
$im = imagecreatefromjpeg($f);
$w = imagesx($im);
$h = imagesy($im);
for ($i=0; $i < $w; $i++)
{
for ($ii=0; $ii < $h; $ii++)
{
$rgb = imagecolorat($im, $i, $ii);
$R = ($rgb >> 16) & 0xFF;
$G = ($rgb >> 8) & 0xFF;
$B = $rgb & 0xFF;
switch ( $channel )
{
case 'r':
$new = $R;
break;
case 'g':
$new = $G;
break;
case 'b':
$new = $B;
break;
case 'n':
$new = round( ($R + $G + $B) / 3 );
break;
}
$px = imagecolorallocate($im, $new, $new, $new);
imagesetpixel ($im, $i, $ii, $px);
}
}
header('Content-type: image/jpeg');
imagejpeg($im);
This image makes the differences between the channels a little bit more obvious.
 |
 |
| Original | Red |
|---|---|
 |
 |
| Green | Blue |
Color Channels
Displaying the channel in it’s original color is the way Photoshop used to do it. I think the change was good, but someone may find this method useful.
This method works in the same way as the previous, only instead of using the color for all three RGB values, we will only specify the color for the corresponding channel, and leave the remaining channels at 0. In other words, using the same example from above, imagine there is a pixel in a shade of orange (#DE4E21). If you separate that channel out in to it’s RGB values, you get rgb(222, 78, 33). For the color channel, the new pixel for the red channel be 222 and the remaining values would be 0, or rgb(222, 0, 0), which is a shade of red, instead of grey.
|
|
 |
 |
 |
 |
| Original | Red | Green | Blue | Grey |
|---|
$f = $_GET['f'];
$channel = $_GET['channel'];
$im = imagecreatefromjpeg($f);
$w = imagesx($im);
$h = imagesy($im);
for ($i=0; $i < $w; $i++)
{
for ($ii=0; $ii < $h; $ii++)
{
$rgb = imagecolorat($im, $i, $ii);
$R = ($rgb >> 16) & 0xFF;
$G = ($rgb >> 8) & 0xFF;
$B = $rgb & 0xFF;
switch ( $channel )
{
case 'r':
$px = imagecolorallocate($im, $R, 0, 0);
break;
case 'g':
$px = imagecolorallocate($im, 0, $G, 0);
break;
case 'b':
$px = imagecolorallocate($im, 0, 0, $B);
break;
case 'n':
$new = round( ($R + $G + $B) / 3 );
$px = imagecolorallocate($im, $new, $new, $new);
break;
}
imagesetpixel ($im, $i, $ii, $px);
}
}
header('Content-type: image/jpeg');
imagejpeg($im);
