Mask an image and fill with color

Question

I would like to mask an image with a color and filling both the selection and the rest. I'm using CGImageCreateWithMaskingColors, but then I don't know how to fill the image with another color.

Here is the begining of my code

UIImage *source = [UIImage imageNamed:@"nb.png"];

const CGFloat myMaskingColors[6] = {0,110,0,110,0,110};
CGImageRef imageRef = CGImageCreateWithMaskingColors(source.CGImage, myMaskingColors);
UIImage* imageB = [UIImage imageWithCGImage:imageRef];
UIImageView *imageView = [[UIImageView alloc]initWithImage:imageB];

Thanks for your help EDIT: I think I was not clear, I would like one color for the selection and another color for the rest

try these parameters `const float myMaskingColors[6] = {1.0, 1.0, 0.0, 0.0, 1.0, 1.0}; ` — Buntylm, May 20 '13 at 10:04

score 1 · Answer 1 · answered May 21 '13 at 10:20

If you want 2 colors to be applied on an image then you can apply gradient on the image like this

- (UIImage *)applyGradientOnImage:(UIImage *)image withStartColor:(UIColor *)color1 endColor:(UIColor *)color2 {
    UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGRect rect = CGRectMake(0, 0, image.size.width, image.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, image.CGImage);
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0, image.size.height), 0);
    UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    CGGradientRelease(gradient);
    CGColorSpaceRelease(space);

    return gradientImage;
}

I applied the gradient to the .image of an (UIImageView *)imageView and that didn't seem to work. — Fang Chen, Oct 31 '14 at 21:11

score 0 · Answer 2 · answered May 20 '13 at 10:10

You can achieve this by applying gradient of a single color. The below code does the same thing which we need

- (UIImage *)applyColor:(UIColor *)color toImage:(UIImage*)toImage{
        UIGraphicsBeginImageContextWithOptions(toImage.size, NO, toImage.scale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, 0, toImage.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);

        CGContextSetBlendMode(context, kCGBlendModeNormal);
        CGRect rect = CGRectMake(0, 0, toImage.size.width, toImage.size.height);
        //CGContextDrawImage(context, rect, img.CGImage);

        // Create gradient
        NSArray *colors = [NSArray arrayWithObjects:(id)color.CGColor, (id)color.CGColor, nil];
        CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
        CGGradientRef gradient = CGGradientCreateWithColors(space, (__bridge CFArrayRef)colors, NULL);

        // Apply gradient
        CGContextClipToMask(context, rect, toImage.CGImage);
        CGContextDrawLinearGradient(context, gradient, CGPointMake(0,0), CGPointMake(0, toImage.size.height), 0);
        UIImage *coloredImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        CGGradientRelease(gradient);
        CGColorSpaceRelease(space);

        return coloredImage;
    }

score 0 · Answer 3 · edited May 23 '17 at 12:14

The problem you amy receive nil, because parameters, that you send is invalid. If you open Apple documentation, you will see this:

Components

An array of color components that specify a color or range of colors to mask the image with. The array must contain 2N values { min1, max1, ... min[N], max[N] } where N is the number of components in color space of image. Each value in components must be a valid image sample value. If image has integer pixel components, then each value must be in the range [0 .. 2**bitsPerComponent - 1] (where bitsPerComponent is the number of bits/component of image). If image has floating-point pixel components, then each value may be any floating-point number which is a valid color component.

try different parameters like

const float myMaskingColors[6] = {1.0, 1.0, 0.0, 0.0, 1.0, 1.0};

I also found a related Question on SO.

Mask an image and fill with color

3 Answers3