How to merge a transparent PNG image with color

Question

I tried with drawInRect and CGContextDrawImage , but it applied to the whole image.

I want this to apply only to the part of the image, and not to the transparent part. Does anyone know how to do this?

Answer 1

Thanks for the help ... I tried this code, it worked for me finally.

 UIGraphicsBeginImageContext(firstImage.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextTranslateCTM(context, 0, firstImage.size.height); CGContextScaleCTM(context, 1.0, -1.0); CGRect rect = CGRectMake(0, 0, firstImage.size.width, firstImage.size.height); // draw black background to preserve color of transparent pixels CGContextSetBlendMode(context, kCGBlendModeNormal); [[UIColor whiteColor] setFill]; CGContextFillRect(context, rect); // draw original image CGContextSetBlendMode(context, kCGBlendModeNormal); CGContextDrawImage(context, rect, firstImage.CGImage); // tint image (loosing alpha) - the luminosity of the original image is preserved CGContextSetBlendMode(context, kCGBlendModeDarken); [[UIColor colorWithPatternImage:secondImage] setFill]; CGContextFillRect(context, rect); // mask by alpha values of original image CGContextSetBlendMode(context, kCGBlendModeDestinationIn); CGContextDrawImage(context, rect, firstImage.CGImage); //[firstImage drawInRect:rect]; // image drawing code here UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); 

Answer 2

You can use UIImage with an alpha channel as a mask for drawing.

Objective-c

 - (UIImage *)overlayImage:(UIImage *)image withColor:(UIColor *)color { // Create rect to fit the PNG image CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height); // Start drawing UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Fill the rect by the final color [color setFill]; CGContextFillRect(context, rect); // Make the final shape by masking the drawn color with the images alpha values CGContextSetBlendMode(context, kCGBlendModeDestinationIn); [image drawInRect:rect blendMode:kCGBlendModeDestinationIn alpha:1]; // Create new image from the context UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); // Release context UIGraphicsEndImageContext(); return img; } 

Usage example:

 UIImage *pngImage = [UIImage imageNamed:@"myImage"]; UIColor *overlayColor = [UIColor magentaColor]; UIImage *image = [self overlayImage:pngImage withColor:overlayColor]; 

Swift 3

 extension UIImage { func overlayed(by overlayColor: UIColor) -> UIImage { // Create rect to fit the image let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height) // Create image context. 0 means scale of device main screen UIGraphicsBeginImageContextWithOptions(rect.size, false, 0) let context = UIGraphicsGetCurrentContext()! // Fill the rect by the final color overlayColor.setFill() context.fill(rect) // Make the final shape by masking the drawn color with the images alpha values self.draw(in: rect, blendMode: .destinationIn, alpha: 1) // Make the final shape by masking the drawn color with the images alpha values let overlayedImage = UIGraphicsGetImageFromCurrentImageContext()! // Release context UIGraphicsEndImageContext() return overlayedImage } } 

Usage example:

 let overlayedImage = myImage.overlayed(by: .magenta) 

---

Edit : as Desdenov noted in a comment, I misunderstood this question. My original answer was drawing PNG on a colored background. The answer has been edited, the code below is original.

 - (UIImage *)combineImage:(UIImage *)image withBackgroundColor:(UIColor *)bgColor { // Create rect to fit the PNG image CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height); // Create bitmap contect UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Draw background first // Set background color (will be under the PNG) [bgColor setFill]; // Fill all context with background image CGContextFillRect(context, rect); // Draw the PNG over the background [image drawInRect:rect]; // Create new image from the context UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); // Release context UIGraphicsEndImageContext(); return img; } 

Answer 3

I applied the following code on the button to fill transparent PNG with color.

 UIImage *colouredImage = _oldImageView.image; colouredImage = [colouredImage imageTintedWithColor:[UIColor colorWithRed:99/255.0 green:4/255.0 blue:96/255.0 alpha:1.0]]; _oldImageView.image = colouredImage; 

Answer 4

I ran into this problem too, and I think @Lukas Kukacka's answer is a great solution. I would like to add a little more to this solution, and I recommend using a category for it. Why a category? Because in my case, I use this "method" in several classes, so instead of writing the same code several times, I will do it only once.

Let's see the code: It will be UIImage + OverlayTintColor.h

 #import <UIKit/UIKit.h> @interface UIImage (OverlayTintColor) - (UIImage *)overlayTintColor:(UIColor *)tintColor; @end 

This will be UIImage + OverlayTintColor.m

 #import "UIImage+OverlayTintColor.h" @implementation UIImage (OverlayTintColor) - (UIImage *)overlayTintColor:(UIColor *)tintColor{ // Create rect to fit the PNG image CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height); // Start drawing UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); // Fill the rect by the final color [tintColor setFill]; CGContextFillRect(context, rect); // Make the final shape by masking the drawn color with the images alpha values CGContextSetBlendMode(context, kCGBlendModeDestinationIn); [self drawInRect: rect blendMode:kCGBlendModeDestinationIn alpha:1]; // Create new image from the context UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); // Release context UIGraphicsEndImageContext(); return img; } @end 

Usage: (Remember to import the category at the top of the class where you intend to use it)

 #import "UIImage+OverlayTintColor.h" ....... UIImage *image=[[UIImage imageNamed:@"test.png"] overlayTintColor:[UIColor blueColor]];