Question

I’ve made this below fitImage function which takes an UIImage and a CGSize. In case the input image is larger then the input box, the image would be scaled down to fill into the box. If the box and image does not have the same ratio the image does not fill the box entirely, and there would be some visible background. In this case this background is always white. How can I change this to e.g. a black background?

+ (UIImage*) fitImage:(UIImage*)image inBox:(CGSize)size {

    if (image.size.width==size.width && image.size.height==size.height)
        return image;

    if (image.size.width<size.width && image.size.height<size.height)
        return [Util scaleImage:image toSize:size];

    float widthFactor = size.width / image.size.width;
    float heightFactor = size.height / image.size.height;

    CGSize scaledSize = size;
    if (widthFactor<heightFactor) {
        scaledSize.width = size.width;
        scaledSize.height = image.size.height * widthFactor;
    } else {
        scaledSize.width = image.size.width * heightFactor;
        scaledSize.height = size.height;
    }

    UIGraphicsBeginImageContextWithOptions( size, NO, 0.0 );

    float marginX = (size.width-scaledSize.width)/2;
    float marginY = (size.height-scaledSize.height)/2;
    CGRect scaledImageRect = CGRectMake(marginX, marginY, scaledSize.width, scaledSize.height );

    [image drawInRect:scaledImageRect];

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

    return scaledImage;
}

Please tell me if you need further information.

Solution:

+ (UIImage*) fitImage:(UIImage*)image inBox:(CGSize)size withBackground:(UIColor*)color {

    if (image.size.width==size.width && image.size.height==size.height)
        return image;

    if (image.size.width<size.width && image.size.height<size.height)
        return [Util scaleImage:image toSize:size];

    float widthFactor = size.width / image.size.width;
    float heightFactor = size.height / image.size.height;

    CGSize scaledSize = size;
    if (widthFactor<heightFactor) {
        scaledSize.width = size.width;
        scaledSize.height = image.size.height * widthFactor;
    } else {
        scaledSize.width = image.size.width * heightFactor;
        scaledSize.height = size.height;
    }

    UIGraphicsBeginImageContextWithOptions( size, NO, 0.0 );

    float marginX = (size.width-scaledSize.width)/2;
    float marginY = (size.height-scaledSize.height)/2;
    CGRect scaledImageRect = CGRectMake(marginX, marginY, scaledSize.width, scaledSize.height );

    UIImage* temp = UIGraphicsGetImageFromCurrentImageContext();
    [color set];
    UIRectFill(CGRectMake(0.0, 0.0, temp.size.width, temp.size.height));
    [image drawInRect:scaledImageRect];

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

    return scaledImage;
}

Answer 1

You can use UIRectFill(rect) to fill the background of a bitmap context with the current fill color. To set the fill color you can use [UIColor set].

e.g.

//Get a temp image to determine the size of the bitmap context
UIImage* temp = UIGraphicsGetImageFromCurrentImageContext();
[[UIColor redColor] set]; //set the desired background color
UIRectFill(CGRectMake(0.0, 0.0, temp.size.width, temp.size.height)); //fill the bitmap context
[image drawInRect:scaledImageRect]; //draw your image over the filled background