Question

I’ve got a need to write an app that can take a picture and then I want to be able to preview it and overlay a graphic and maybe some text and then save it back to the image library.

So, my user would start my app which would then use UIImagePickerController to access the camera and get the data of the image through delegation.

Then I want to display it on the screen and then present controls to add a visible image (or logo specifically) and give the user the option to add maybe one or two lines of text which are then positioned on an area of the picture.

The user will then click save and the resulting composited image will be written to the camera roll/photo library which then the user can upload the image to twitter, facebook etc as needed (I don’t want the overhead of implementing OAuth2 that can be someone else’s problem).

So, what I need to know is which of the many libraries available in the SDK will let me do this? CGImage? And given my overlay logo will be a transparent PNG, how do I overlay one on the other?

I’ve heard that you can present with CALayer but I don’t know how you then grab all the layers together (flatten them).

In PHP you would use something like imagecopymerge(), i’m having trouble figuring out the equivalents.

I don’t want to pass the data to a webserver and back as I know it can be done natively.

Thanks

Answer 1

Well to add text onto of the image i’m sure you can just use a textfield to get input then put the text into a label. This part can be done a few different ways but is fairly easy.

As far as grabbing a combined image of all the layers you can use Quartz.

Every UIWindow (inherited from UIView) and UIView is backed by a CALayer. The CALayer/-renderInContext: method lets you render a layer and its sublayers to a graphics context. So, to grab a snapshot of the entire screen, you can iterate through each window on the screen and render its layer hierarchy to a destination context. Once finished you can get the screenshot image via the UIGraphicsGetImageFromCurrentImageContext function, as shown below.

Note that, CALayer/-renderInContext: captures only your UIKit and Quartz drawing. It does not capture OpenGL ES or video content.

#import <QuartzCore/QuartzCore.h>

…..

- (UIImage*)screenshot 
{
    // Create a graphics context with the target size
    // On iOS 4 and later, use UIGraphicsBeginImageContextWithOptions to take the scale into consideration
    // On iOS prior to 4, fall back to use UIGraphicsBeginImageContext
    CGSize imageSize = [[UIScreen mainScreen] bounds].size;
    if (NULL != UIGraphicsBeginImageContextWithOptions)
        UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0);
    else
        UIGraphicsBeginImageContext(imageSize);

    CGContextRef context = UIGraphicsGetCurrentContext();

    // Iterate over every window from back to front
    for (UIWindow *window in [[UIApplication sharedApplication] windows]) 
    {
        if (![window respondsToSelector:@selector(screen)] || [window screen] == [UIScreen mainScreen])
        {
            // -renderInContext: renders in the coordinate space of the layer,
            // so we must first apply the layer's geometry to the graphics context
            CGContextSaveGState(context);
            // Center the context around the window's anchor point
            CGContextTranslateCTM(context, [window center].x, [window center].y);
            // Apply the window's transform about the anchor point
            CGContextConcatCTM(context, [window transform]);
            // Offset by the portion of the bounds left of and above the anchor point
            CGContextTranslateCTM(context,
                                  -[window bounds].size.width * [[window layer] anchorPoint].x,
                                  -[window bounds].size.height * [[window layer] anchorPoint].y);

            // Render the layer hierarchy to the current context
            [[window layer] renderInContext:context];

            // Restore the context
            CGContextRestoreGState(context);
        }
    }

    // Retrieve the screenshot image
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return image;
}

As far as uploading to Facebook and Twitter take a look at ShareKit. It’s a drag and drop library for sharing with Facebook, Twitter, Tumblr, email, etc.. Having this would add value to your app. I’d recommend implementing it.