Basic Color Masking with PHP

There was a certain set of tools in Photoshop that I really enjoyed using back in my days of graphic design. Whether it was the color match, the magic wand, or some sort of filtering mask, the ability to pull objects out of a flat image seemed pretty cool. And, thanks to some of the different image manipulation libraries in PHP, not too difficult to replicate.

After digging around a bit I sketched out a few different approaches I could take. There's a color angle - usually objects in a photo have a certain grouping of colors (or the background does). If I wanted to pull a face out of a photo I could hunt down flesh-colored pixels. If I wanted to pull an entire person (face, hair, clothes, etc) than that would be more difficult and I'd probably try to select and discard the background instead.

There are other parameters, like pixel proximity, approximate lines/shapes, shadows and hues, etc, but the color angle seemed to be one of the easiest to start with. By leaning on the GD library in PHP you can easily target a pixel in a JPEG, pull its color, map the value to a standard format (rgb), and then do a test to see if it fits within the masking range. The code to do this wasn't terribly difficult, though there were a few interesting points I ran into along the way.

/**
 * First, let's declare some variables
 */

// the mask color
$mask = array(
    'red' => 0x00,
    'green' => 0xFF,
    'blue' => 0x00,
);

// background color to replace
$target_color = array(
    'red' => 0x70,
    'green' => 0xA0,
    'blue' => 0xF6,
);

// tolerance for color matching
$tolerance = .2;

// path of the image to pull from
$input_path = 'yay.jpg';

// path of the image to output
$output_path = 'boo.jpg';

// bump up the memory limit for processing
ini_set('memory_limit', '512M');


/**
 * Helper functions
 */

function transform_to_rgb($color) {
    return array(
        'red' => ($color >> 16) & 0xFF,
        'green' => ($color >> 8) & 0xFF,
        'blue' => $color & 0xFF,
    );
}

function compute_color_similarity($color_one, $color_two) {
    return sqrt(
        pow(($color_two['red'] - $color_one['red']), 2) +
        pow(($color_two['green'] - $color_one['green']), 2) +
        pow(($color_two['blue'] - $color_one['blue']), 2)) /
        sqrt(pow(255, 2) + pow(255, 2) + pow(255, 2));
}


/**
 * Now it's time for the processing
 */

$input = imagecreatefromjpeg($input_path);

$width = imagesx($input);
$height = imagesy($input);

$output = imagecreatetruecolor($width, $height);

$mask_color = imagecolorallocate($output, $mask['red'], $mask['green'], $mask['blue']);

for ($y = 0; $y < $height; $y++) {
    for ($x = 0; $x < $width; $x++) {
        $pixel_color = imagecolorat($input, $x, $y);
        $pixel_color = transform_to_rgb($pixel_color);
        $similarity = compute_color_similarity($pixel_color, $target_color);

        if ($similarity <= $tolerance) {
            $replace_color = $mask_color;
        } else {
            $replace_color = imagecolorallocate($output, $pixel_color['red'], $pixel_color['green'], $pixel_color['blue']);
        }
        
        imagesetpixel($output, $x, $y, $replace_color);
    }
}

imagedestroy($input);
imagejpeg($output, $output_path);
imagedestroy($output);

Comparing colors isn't as easy as it sounds. I browsed around the internet trying to find a good method and ended up with a dozen. Some people claim that HSL values are easier to compare than RGB, others promote using complex algorithms, while some just prefer to use a mixture of multiple methods. Since the range of colors that I'm looking for is relatively small (hopefully) I wasn't too worried about accurate comparisons of very different colors. I just settled on a typical three-dimensional distance formula instead.

When doing the actual mask I found it easiest to create a blank image and plop each individual pixel down in place. I had hoped to do it more streaming, opening up a connection with the input, iterating through each pixel, and then changing it if necessary, but that isn't really an option using PHP GD. It may have something to do with JPEG compression (thus, it may be possible to stream with TIFFs). Whatever the reason is it forced me to bump my memory usage to an embarrassing level.

Another interesting point is the color -> RGB conversion. As a web designer I've mostly dealt with colors in hex format (#FFCC00 is Michigan Tech yellow). GD via PHP tends to return an int. By doing some masking and converting to hex its easy to turn 16763904 -> 0xFF, 0xCC, 0x00, or #FFCC00.

Some future steps I may take is adding in some of those additional checks, factoring in the actual location of each pixel when deciding if its worth masking or not and trying to smooth out some of the curves. Also it'd be nice to completely drop the unnecessary pixels instead of just masking them, possibly saving the final image as a PNG or something else with transparency. For now, though, I'm quite happy to have replicated (in a somewhat rudimentary way) one of my old Photoshop tools with PHP.