Multiple Clipped Rects to Create Collage in Core Graphics

Question

I am creating a collage combined with elements from other images. Here is some ASCII art to explain what I am doing:

Given images A, B and C,
AAA, BBB, CCC
AAA, BBB, CCC
AAA, BBB, CCC

I take part of A, part of B and part of C as columns:

Axx, xBx, xxC
Axx, xBx, xxC
Axx, xBx, xxC

...and combine them in one image like this:

ABC
ABC
ABC

where the first 1/3rd of the image is a colum of A's pic, the middle is a column of B's pic and the last is a column of C's pic.

I have some code written but it is only showing the first column and not the rest… I think I have to clear the clipping somehow, bt I am not sure of how to do it or whether this is even the best approach.

+ (UIImage *)collageWithSize:(NSInteger)size fromImages:(NSArray *)images {
    NSMutableArray *selectedImages = [NSMutableArray array];
    [selectedImages addObjectsFromArray:images];

    // use the selectedImages for generating the thumbnail
    float columnWidth = (float)size/(float)[selectedImages count];

    //create a context to do our clipping in
    UIGraphicsBeginImageContext(CGSizeMake(size, size));
    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    for (int i = 0; i < [selectedImages count]; i++) {
        // get the current image
        UIImage *image = [selectedImages objectAtIndex:i];

        //create a rect with the size we want to crop the image to
        CGRect clippedRect = CGRectMake(i*columnWidth, 0, columnWidth, size);
        CGContextClipToRect(currentContext, clippedRect);

        //create a rect equivalent to the full size of the image
        CGRect drawRect = CGRectMake(0, 0, size, size);

        //draw the image to our clipped context using our offset rect
        CGContextDrawImage(currentContext, drawRect, image.CGImage);
    }

    //pull the image from our cropped context
    UIImage *collage = UIGraphicsGetImageFromCurrentImageContext();

    //pop the context to get back to the default
    UIGraphicsEndImageContext();

    //Note: this is autoreleased
    return collage;
}

What am I doing wrong?

PS the image is drawing upside down too.

Answer 1

CGContextClipToRect intersects the current clipping rectangle with the argument provided. So the second time you call it, you are effectively turning your clipping region to nothing.

There is no way to restore the clipping region without restoring the graphics state. So, make a call to CGContextSaveGState at the top of your loop and a call to CGContextRestoreGState at the bottom.

The upside-down part can be fixed by adjusting the current transformation matrix: call CGContextTranslateCTM to move the origin and then CGContextScaleCTM to flip the y-axis.

Answer 2

The upside down image can be corrected by calling the below method :

CGImageRef flip (CGImageRef im) {
CGSize sz = CGSizeMake(CGImageGetWidth(im), CGImageGetHeight(im));
UIGraphicsBeginImageContextWithOptions(sz, NO, 0);
CGContextDrawImage(UIGraphicsGetCurrentContext(),
                   CGRectMake(0, 0, sz.width, sz.height), im);
CGImageRef result = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
UIGraphicsEndImageContext();
return result;

}

Take help from below code as to where u will put this code:

UIGraphicsBeginImageContextWithOptions(CGSizeMake(leftRect.size.width, leftRect.size.height), NO, 0);
CGContextRef con = UIGraphicsGetCurrentContext();
CGContextDrawImage(con, leftRect,flip(leftReference));