Keeping right tints after image masking

问题

I need to fill programmatically image with different colors with mask I got from our designer in photoshop file: http://image.openlan.ru/images/83339350420766181806.png

I almost finish this except of details I missed:

UIImage *mask = [UIImage imageNamed:@"mask.png"];
UIImage *image = [UIImage imageNamed:@"vehicle.png"];

mask = [image maskImage:image withMask:mask];
image = [image coloredImageWithColor:[UIColor blueColor]];
image = [image drawImage:mask inImage:image];

Where methods implementations:

- (UIImage *) maskImage:(UIImage *)image withMask:(UIImage *)maskImage
{
    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);

    UIImage *im = [UIImage imageWithCGImage:masked];

    CGImageRelease(masked);
    CGImageRelease(maskRef);
    CGImageRelease(mask);

    return im;
}

- (UIImage *) coloredImageWithColor:(UIColor *)color
{
    UIGraphicsBeginImageContext(self.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM(context, 0, self.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGContextSetBlendMode(context, kCGBlendModeDarken);
    CGRect rect = (CGRect){ CGPointZero, self.size };
    CGContextDrawImage(context, rect, self.CGImage);
    CGContextClipToMask(context, rect, self.CGImage);

    [color set];
    CGContextFillRect(context, rect);

    UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return coloredImage;
}

- (UIImage *) drawImage:(UIImage *)fgImage inImage:(UIImage *)bgImage
{
    UIGraphicsBeginImageContextWithOptions(bgImage.size, FALSE, 0.0);
    [bgImage drawInRect:(CGRect){ CGPointZero, bgImage.size }];
    [fgImage drawInRect:(CGRect){ CGPointZero, fgImage.size }];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

My current result is: http://image.openlan.ru/images/34429534616655410787.png

I don't think if I use gradient, I'll see right result. What I don't like now is lack of tints in some image areas. What am I doing wrong here?

回答1:

Inspired by this post I implemented my task eventually.

It's an origin image:

Then I drew a mask for this image do not fill special areas:

Below main method drawing this:

- (void) vehicleConfigure
{
    NSString *vehicleName = @"sports.png";
    UIImage *vehicleImage = [UIImage imageNamed:vehicleName];

    vehicleName = [vehicleName stringByReplacingOccurrencesOfString:@".png" withString:@"-mask.png"];
    UIImage *mask = [UIImage imageNamed:vehicleName];
    mask = [vehicleImage applyingMask:mask];

    vehicleImage = [vehicleImage coloredImageWithColor:RGB(30, 128, 255)];
    vehicleImage = [vehicleImage drawMask:mask];

    m_vehicleImageView.contentMode = UIViewContentModeScaleAspectFit;
    m_vehicleImageView.image = vehicleImage;
}

Where I use category of UIImage with methods:

- (UIImage *) drawMask:(UIImage *)mask
{
    UIGraphicsBeginImageContextWithOptions(self.size, FALSE, 0.0);
    [self drawInRect:(CGRect){ CGPointZero, self.size }];
    [mask drawInRect:(CGRect){ CGPointZero, mask.size }];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

- (UIImage *) applyingMask:(UIImage *)maskImage
{
    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask([self CGImage], mask);

    UIImage *im = [UIImage imageWithCGImage:masked
                                      scale:[[UIScreen mainScreen] scale]
                                orientation:UIImageOrientationUp];

//    CGImageRelease(masked);
//    CGImageRelease(maskRef);
//    CGImageRelease(mask);

    return im;
}

- (UIImage *) coloredImageWithColor:(UIColor *)color
{
    UIGraphicsBeginImageContext(self.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextTranslateCTM(context, 0, self.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGContextSetBlendMode(context, kCGBlendModeColorBurn);
    CGRect rect = (CGRect){ CGPointZero, self.size };

    CGContextDrawImage(context, rect, self.CGImage);
    CGContextClipToMask(context, rect, self.CGImage);

    [color set];

    CGContextFillRect(context, rect);

    UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return coloredImage;
}

And result looks:

来源：https://stackoverflow.com/questions/27875229/keeping-right-tints-after-image-masking