merging UIImagePickerController image with cameraOverlayView

Posted by GameDev on Stack Overflow See other posts from Stack Overflow or by GameDev
Published on 2011-06-25T22:59:43Z Indexed on 2011/06/26 8:22 UTC
Read the original article Hit count: 333

Im really in the need for some help and advice. Spent the last week on this and have now just become frustrated as i cant get it to work!

Basically, im trying to merge two images into one image to display/save.

First the user picks an image from album, it goes to edit image screen where user can move and scale the image. On this screen is an overlay image (320x480) for the person to align there eyes in.

Once aligned I want to save this image (edited and overlay) into one and pass the image onto my next screen.

It works fine when the image is filling the edit/crop box, but when the image is widescreen with top and bottom not filling the box, then when i save the image the coords of the overlay dont get saved correctly!

Heres my code, ive tried various ways of doing this but have failed at every attempt :(

- (void) imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{       
    // Access the cropped image from info dictionary
    UIImage *image = [info objectForKey:@"UIImagePickerControllerEditedImage"];

    // Combine image with overlay before saving!!
    image = [self addOverlayToImage:image];

    overlayGraphicView.image = nil;

    // Take the picture image to the post picture view controller
    postPictureView = [[PostPictureViewController alloc] init:image Company:companyName withLink:buyButtonLink];    
    [picker pushViewController:postPictureView animated:YES];

    [picker release],picker = nil;
}

The problem is that the image picked (originalImage) could be of any height, my overlayImage is however always 320x480, its almost all transparent with just two eye images in center which i want to save over the original images eyes!

- (UIImage*) addOverlayToImage:(UIImage*)originalImage
{
    CGRect cgRect =[[UIScreen mainScreen] bounds];
    CGSize size = cgRect.size;

    UIGraphicsBeginImageContext(size);

    [originalImage drawInRect:CGRectMake(0, 0, size.width, size.height)];

    UIImage* overlayImage = [UIImage imageNamed:overlayGraphicName];

    [(UIImage *)overlayImage drawInRect:CGRectMake(0, 0, size.width, size.height)];

    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
    [finalImage retain];

    UIGraphicsEndImageContext();

    return finalImage;
}

I wish there was just an easy way to take a screenshot of whatever is in the edit crop box :(

Please if someone could help me with this ASAP as I need to finish this in 1-2 days time!

Thank you.

EDIT:- I should also mention that with this I get the correct center of the screen and placement of the overlay on my next screen:

[(UIImage *)overlayImage drawInRect:CGRectMake(0, 0, size.width, size.height)];

However, I am unable to work out the correct position of the main image especially as the height is different for every image if not fullscreen! I tried this to center it into the correct position but it doesnt work:

[originalImage drawInRect:CGRectMake(0,(size.height/2 - originalImage.size.height/2), originalImage.size.width, originalImage.size.height)];

© Stack Overflow or respective owner

Related posts about iphone

Related posts about ios4