iPhone - How do you color an image?

Question

I would love to know how to color an image (make a white .png red, for example). I have seen various suggestions but never any confirmation that this is actually possible. I have tried this:

-(UIImage *)colorizeImage:(UIImage *)baseImage color:(UIColor *)theColor {
    UIGraphicsBeginImageContext(baseImage.size);

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGRect area = CGRectMake(0, 0, baseImage.size.width, baseImage.size.height);

    CGContextScaleCTM(ctx, 1, -1);
    CGContextTranslateCTM(ctx, 0, -area.size.height);
    CGContextSaveGState(ctx);
    CGContextClipToMask(ctx, area, baseImage.CGImage);
    [theColor set];
    CGContextFillRect(ctx, area);
    CGContextRestoreGState(ctx);
    CGContextSetBlendMode(ctx, kCGBlendModeNormal);
    CGContextDrawImage(ctx, area, baseImage.CGImage);
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

myImageView.image = [self colorizeImage:[UIImage imageNamed:@"whiteImage.png"] color:[UIColor redColor]];

But it doesn't work - the image is still white on the screen.

Answer 1

If you set the backgroundColor of an UIImageView to [UIColor redColor], the parts of the original PNG that were transparent will become red. Alternatively, you could try adding a semi-transparent UIView with background color red as subview of the imageview. This will add a red haze to the view displaying the image.

Answer 2

You're drawing the color first, and then drawing the image on top of it. Unless the image is partially transparent, it's going to completely overdraw the background color. I recommend trying to draw the original image first, and then drawing red over it using kCGBlendModeHue.

I'm not certain why you're flipping and translating your context. Is your picture upside down?

Answer 3

Okay, how's this?

In your asset creation phase (NOT dynamically while the application is running), invert the color scheme of your images. Part that is now white -> transparent. Part that is now transparent -> whatever the background of the page is.

Under each image, place a blank white view of the same size. When you wish to turn the image to red, change the color of that blank white view to red.

Is that doable?

Answer 4

Does anyone know why the code in the question is rotating the image by 270 degrees?

Answer 5

Change your blend mode to multiply and your code will work:

CGContextSetBlendMode(ctx, kCGBlendModeMultiply);

Answer 6

hello CGContextSetBlendMode(ctx, kCGBlendModeMultiply); is not working.

I also have the same problem.

Does anyone answer me ??

Answer 7

@geekkid, hey i used to mask an image with a color, i faced the same issue. i found the problem to be with iOS's interpretation of axis. u need to add a couple of lines of code to ur existing method to make ur image appear upright. ping me @ [email protected] and remind me to do so. am going to hit the bed now.

Answer 8

@geek kid, let me know if this helps u dude...

// translate/flip the graphics context (for transforming from CG* coords to UI* coords) CGContextTranslateCTM(context, 0, img.size.height); CGContextScaleCTM(context, 1.0, -1.0);

//replace "context" with UIGraphicsGetCurrentContext() or if u have an instance of the current context.

Hope that helps.