Combining multiple UIImageViews and preserve resolution

Question

I am designing an application where a user places multiple UIImageViews one over another. When the user decides to save this to photo album, I have to combine all these UIImageViews and save it to Photo Library. While combining them I need to preserve their positions, resolutions, zorder. The approach I tried I was to have a parent UIView which acts like a container. The user places all the UIImageViews inside this UIView. While saving, I take a screenshot of the UIView and save it. Although this approach works, it does not preserve the resolution. The resolution of the final image is same as the resolution of the parent UIView size (width and height being 300 pixels). Is there way to preserve the resolution? or atleast have a higher resolution like upto 1024 x 768 pixels? Any pointers/code examples would be appreciated!

Answer 1

What you are doing, saving the UIView, is a very good idea if the size of the UIView is higher than the size of the biggest image you have, but that's almost never the case. What you have to do is to create a Graphic Context (CGContextRef), as big as the biggest of your images, sort your images by z-order and start drawing those images there. I'll try to help you with some pseudo code:

-(UIImage *)mergeFlag{

UIImage * mergedImage = nil;

//In some pace you need to fill these values with the biggest width of all your images and the biggest height;
int Max_Width;
int Max_Height;

//Use here your image with the biggest Z-order.
CGImageRef image;

size_t cWitdh = Max_Width;
size_t cHeight = Max_Height;
size_t bitsPerComponent = 8;//If 8 isn't right you should use CGImageGetBitsPerComponent(image) with some image.
size_t bytesPerRow = 4 * Max_Width;// I use 4 assuming you have 8 Bits per component and you have 4 components (R,G,B,A) , if you have an image specifically, you can use CGImageGetBytesPerRow(image)

//Now we build a Context with those dimensions.
CGContextRef context = CGBitmapContextCreate(nil, cWitdh, cHeight, bitsPerComponent, bytesPerRow, CGColorSpaceCreateDeviceRGB(), CGImageGetBitmapInfo(image));

//The code of this cycle is to ilustrate what you have to do:
for(image in your Images ordered by z-Order)
{
    //The location where you draw your image on the context is not always the same location you have in your UIView, 
    //this could change and you need to calculate that position according to the scale between you images real size, and the size of the UIImage being show on the UIView.
    CGContextDrawImage(context, CGRectMake(currentImage.frame.origin.x, currentImage.frame.origin.y, CGImageGetWidth(currentImage), CGImageGetHeight(currentImage), currentImage);
}

CGImageRef mergeResult  = CGBitmapContextCreateImage(context);
mergedImage = [[UIImage alloc] initWithCGImage:tmp];
CGContextRelease(context);
CGImageRelease(mergeResult);
return mergedImage;}

Hope it helps.