Tint an image view

I was developing an editor kind of stuff, where there are multiple images placed in a view and lot of custom drawings happen here and there in the custom views. The user gets to select a view and it has to be highlighted. For this I used to dram a boundary line using NSBezierPath in the view’s drawRect: method. But this used to hide the edges and corners of the view. Users started to complain they cannot place the views pixel perfect. They demanded for tinting the view.

After googling out for some time I found following NSImage extension:

@implementation NSImage (Extends)

- (NSImage *)imageTintedWithColor:(NSColor *)tint
if (tint != nil) {
NSSize size = [self size];
NSRect bounds = { NSZeroPoint, size };
NSImage *tintedImage = [[NSImage alloc] initWithSize:size];

[tintedImage lockFocus];

CIFilter *colorGenerator = [CIFilter filterWithName:@"CIConstantColorGenerator"];
CIColor *color = [[[CIColor alloc] initWithColor:tint] autorelease];

[colorGenerator setValue:color forKey:@"inputColor"];

CIFilter *monochromeFilter = [CIFilter filterWithName:@"CIColorMonochrome"];
CIImage *baseImage = [CIImage imageWithData:[self TIFFRepresentation]];

[monochromeFilter setValue:baseImage forKey:@"inputImage"];
[monochromeFilter setValue:[CIColor colorWithRed:0.75 green:0.75 blue:0.75] forKey:@"inputColor"];
[monochromeFilter setValue:[NSNumber numberWithFloat:1.0] forKey:@"inputIntensity"];

CIFilter *compositingFilter = [CIFilter filterWithName:@"CIMultiplyCompositing"];

[compositingFilter setValue:[colorGenerator valueForKey:@"outputImage"] forKey:@"inputImage"];
[compositingFilter setValue:[monochromeFilter valueForKey:@"outputImage"] forKey:@"inputBackgroundImage"];

CIImage *outputImage = [compositingFilter valueForKey:@"outputImage"];

[outputImage drawAtPoint:NSZeroPoint

[tintedImage unlockFocus];

return [tintedImage autorelease];
else {
return [[self copy] autorelease];


Call this method on the view’s image:
[view.image imageTintedWithColor:[NSColor redColor]];

Hope this is helpful.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s