IOS: applying RGB filter for PNG in grayscale

Question

I have a top view on a gray-green color.

(PNG format, therefore has an alpha component)

I would like to create 12 small size buttons, each of which is different from this image.

For accuracy, I would like to do this inside the code, and not from the outside in some kind of art package.

Can someone provide a method (or even some code) for this?

PS I know how to do this in GL using ridiculous code, I hope there is an easier way to use the main graphic / main animation

EDIT: Working solution thanks to awesomeness from under the answer

CGSize targetSize = (CGSize){100,100}; UIImage* image; { CGRect rect = (CGRect){ .size = targetSize }; UIGraphicsBeginImageContext( targetSize ); { CGContextRef X = UIGraphicsGetCurrentContext(); UIImage* uiGem = [UIImage imageNamed: @"GemTop_Dull.png"]; // draw gem [uiGem drawInRect: rect]; // overlay a red rectangle CGContextSetBlendMode( X, kCGBlendModeColor ) ; CGContextSetRGBFillColor ( X, 0.9, 0, 0, 1 ); CGContextFillRect ( X, rect ); // redraw gem [uiGem drawInRect: rect blendMode: kCGBlendModeDestinationIn alpha: 1. ]; image = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); } 

Answer 1

The easiest way to do this is to paint the image in RGB-colorspaced CGBitmapContext , use CGContextSetBlendMode to set kCGBlendModeColor , and then draw it in solid color (e.g. using CGContextFillRect ).

Answer 2

The best results come from using a gray value for indexing into a gradient that goes from the darkest to the lightest colors of the desired result. Unfortunately, I do not know the specifics of this with the main graphics.

Answer 3

This improves the answer in the question and the @Anomie implementation

First put this at the beginning of your UIButton class or your view controller. It translates from UIColor to the RGBA value, which you will need later.

 typedef enum { R, G, B, A } UIColorComponentIndices; @implementation UIColor (EPPZKit) - (CGFloat)redRGBAValue { return CGColorGetComponents(self.CGColor)[R]; } - (CGFloat)greenRGBAValue { return CGColorGetComponents(self.CGColor)[G]; } - (CGFloat)blueRGBAValue { return CGColorGetComponents(self.CGColor)[B]; } - (CGFloat)alphaRGBAValue { return CGColorGetComponents(self.CGColor)[A]; } @end 

Now make sure you have a custom IB image button with a grayscale picture and a right frame. This is significantly better and easier than programmatically creating a custom image button, because:

• you can let IB upload the image, rather than upload it manually.
• you can customize the button and see it visually in IB
• your IB will be more like your application at runtime
• you do not need to set frames manually

Assuming you have a button in IB (next to it there will be support for its programmatic creation), add this method to your view controller or to the cub cub class:

 - (UIImage*)customImageColoringFromButton:(UIButton*)customImageButton fromColor:(UIColor*)color { UIImage *customImage = [customImageButton.imageView.image copy]; UIGraphicsBeginImageContext(customImageButton.imageView.frame.size); { CGContextRef X = UIGraphicsGetCurrentContext(); [customImage drawInRect: customImageButton.imageView.frame]; // Overlay a colored rectangle CGContextSetBlendMode( X, kCGBlendModeColor) ; CGContextSetRGBFillColor ( X, color.redRGBAValue, color.greenRGBAValue, color.blueRGBAValue, color.alphaRGBAValue); CGContextFillRect ( X, customImageButton.imageView.frame); // Redraw [customImage drawInRect:customImageButton.imageView.frame blendMode: kCGBlendModeDestinationIn alpha: 1.0]; customImage = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); return customImage; } 

Then you will need to call it in the setup method in your view controller or subclass of the button and set the button image for it:

 [myButton.imageView setImage:[self customImageColoringFromButton:myButton fromColor:desiredColor]]; 

If you are not using IB to create a button, use this method:

 - (UIImage*)customImageColoringFromImage:(UIImage*)image fromColor:(UIColor*)color fromFrame:(CGRect)frame { UIImage *customImage = [image copy]; UIGraphicsBeginImageContext(frame.size); { CGContextRef X = UIGraphicsGetCurrentContext(); [customImage drawInRect: frame]; // Overlay a colored rectangle CGContextSetBlendMode( X, kCGBlendModeColor) ; CGContextSetRGBFillColor ( X, color.redRGBAValue, color.greenRGBAValue, color.blueRGBAValue, color.alphaRGBAValue); CGContextFillRect ( X, frame); // Redraw [customImage drawInRect:frame blendMode: kCGBlendModeDestinationIn alpha: 1.0]; customImage = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); return customImage; } 

And name it with:

 [self.disclosureButton.imageView setImage:[self customImageColoringFromImage:[UIImage imageNamed:@"GemTop_Dull.png"] fromColor:desiredColor fromFrame:desiredFrame]];