How can I colorize a black/white UIImageView programmatically?

Question

I have a set of black and white images, like below. If I remember correctly, there\'s some way to set the blending or masking property of a UIImage to blend it with the backgrou

Answer 1

The easiest way in this case would be to overlay a translucent red rectangle above the image. Since the image is black and white, the black areas will stay black. Change the height of the red rectangle to indicate different health levels.

Just make a UIView with a red background color, not opaque, the same size as the UIImageView. Set the alpha of the background color to half or less.

Answer 2

You can draw new image base on this image. The below code will blends white in your image with the background color that you provide. The percent is a 0-1.0 float that controls how much of an image starting from the bottom is blended with the color you selected, so it is possible to get results like the heart filling up with red to represent hitpoints.

-(UIImage*)blendImage:(UIImage*)image withColor:(UIColor*)color fillUpTo:(float)percent
{
    //math got me
    float realPercent = 1.0-percent;

    CGSize size = image.size;
    UIGraphicsBeginImageContext(size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, CGRectMake(0, size.height*realPercent, size.width, size.height*(1-realPercent)));

    //make sure the image is not upside down
    CGContextTranslateCTM(context, 0, image.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    //draw image by blending colors
    CGContextSetBlendMode(context, kCGBlendModeMultiply);
    CGContextDrawImage(context, CGRectMake(0, 0, size.width, size.height), image.CGImage);


    UIImage *resultImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return resultImage;
}

result with 0.3 percent: