Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I tint a UIImage with gradient?

I searched everywhere but didn't find the solution. I have image 1. How can I programatically tint them with gradient to get images 2 and 3? Here are those images:

images 1, 2, 3

Tints that I applied to them via Photoshop are simple 2-color linear gradients.

And my question is: how can I achieve this effect programatically?


Solution: jrtc27 gave me almost working example. I fixed it (for ARC) and made it reusable (using UIImage's category). Here is it:

- (UIImage *)tintedWithLinearGradientColors:(NSArray *)colorsArr {     CGFloat scale = self.scale;     UIGraphicsBeginImageContext(CGSizeMake(self.size.width * scale, self.size.height * scale));     CGContextRef context = UIGraphicsGetCurrentContext();     CGContextTranslateCTM(context, 0, self.size.height);     CGContextScaleCTM(context, 1.0, -1.0);      CGContextSetBlendMode(context, kCGBlendModeNormal);     CGRect rect = CGRectMake(0, 0, self.size.width * scale, self.size.height * scale);     CGContextDrawImage(context, rect, self.CGImage);      // Create gradient      UIColor *colorOne = [colorsArr objectAtIndex:1]; // top color     UIColor *colorTwo = [colorsArr objectAtIndex:0]; // bottom color       NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, (id)colorTwo.CGColor, nil];     CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();     CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL);      // Apply gradient      CGContextClipToMask(context, rect, self.CGImage);     CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0,self.size.height * scale), 0);     UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();     UIGraphicsEndImageContext();     return gradientImage; } 
like image 683
akashivskyy Avatar asked Nov 11 '11 18:11

akashivskyy


1 Answers

EDIT: Here is a version which supports non-retina and retina displays

The method can be used as a category for UIImage

+ (UIImage *)imageWithGradient:(UIImage *)img startColor:(UIColor *)color1 endColor:(UIColor *)color2 {     UIGraphicsBeginImageContextWithOptions(img.size, NO, img.scale);     CGContextRef context = UIGraphicsGetCurrentContext();     CGContextTranslateCTM(context, 0, img.size.height);     CGContextScaleCTM(context, 1.0, -1.0);      CGContextSetBlendMode(context, kCGBlendModeNormal);     CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height);     //CGContextDrawImage(context, rect, img.CGImage);      // Create gradient     NSArray *colors = [NSArray arrayWithObjects:(id)color2.CGColor, (id)color1.CGColor, nil];     CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();     CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL);      // Apply gradient     CGContextClipToMask(context, rect, img.CGImage);     CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0, img.size.height), 0);     UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();     UIGraphicsEndImageContext();      CGGradientRelease(gradient);     CGColorSpaceRelease(space);      return gradientImage; } 

Edit: added change by sobri

like image 109
remy Avatar answered Sep 19 '22 09:09

remy