Question

I am taking an image, loading it via the screen context, and changing it pixel by pixel. I have a number of different filters that I am applying to the images, but the last thing I need to do is shift the color balance (similar to Photoshop) to make the red more cyan.

The code below shows how I am taking the image, getting the data, and going through the r/g/b values pixel by pixel:

CGImageRef sourceImage = theImage.image.CGImage;

CFDataRef theData;
theData = CGDataProviderCopyData(CGImageGetDataProvider(sourceImage));

UInt8 *pixelData = (UInt8 *) CFDataGetBytePtr(theData);

int dataLength = CFDataGetLength(theData);


int red = 0;
int green = 1;
int blue = 2;


for (int index = 0; index < dataLength; index += 4) {

    int r = pixelData[index + red];
    int g = pixelData[index + green];
    int b = pixelData[index + blue];

    // the color balancing would go here...

    if (r < 0) r = 0;
    if (g < 0) g = 0;
    if (b < 0) b = 0;

    if (r > 255) r = 255;
    if (g > 255) g = 255;
    if (b > 255) b = 255;

    pixelData[index + red] = r;
    pixelData[index + green] = g;
    pixelData[index + blue] = b;

}



CGContextRef context;
context = CGBitmapContextCreate(pixelData,
                                CGImageGetWidth(sourceImage),
                                CGImageGetHeight(sourceImage),
                                8,
                                CGImageGetBytesPerRow(sourceImage),
                                CGImageGetColorSpace(sourceImage),
                                kCGImageAlphaPremultipliedLast);

CGImageRef newCGImage = CGBitmapContextCreateImage(context);
UIImage *newImage = [UIImage imageWithCGImage:newCGImage];

CGContextRelease(context);
CFRelease(theData);
CGImageRelease(newCGImage);

theImage.image = newImage;

I am doing a number of other things to the pixel data (setting the levels, desaturating) but I need to shift the red value toward cyan.

In Photoshop, I am able to do it via:

Image: Adjustment: Color Balance
and setting it to -30 0 0

I have not been able to find an algorithm or an example explaining how this color shift is performed. I have tried to subtract 30 from every red value, or setting a hard maximum at 255 – 30 (225), but those seem to clip the colors and not shift the values… Right now, I’m just hacking around on it, but pointers to a reference would help out a lot.

(NB: I am not able to use an OpenGL solution because I have to take the same algorithm and convert it to PHP/gd for a web server version of this application)

Answer 1

What you need to do is subtract the red and then correct the “lightness” to match the old color, for whatever measure of lightness you choose. Something like this should work:

// First, calculate the current lightness.
float oldL = r * 0.30 + g * 0.59 + b * 0.11;

// Adjust the color components. This changes lightness.
r = r - 30;
if (r < 0) r = 0;

// Now correct the color back to the old lightness.
float newL = r * 0.30 + g * 0.59 + b * 0.11;
if (newL > 0) {
    r = r * oldL / newL;
    g = g * oldL / newL;
    b = b * oldL / newL;
}

Note this behaves somewhat oddly when given pure red (it will leave it unchanged). OTOH, GIMP (version 2.6.11) does the same thing in its color balance tool so I’m not too worried about it.