Create a UIImage from two other UIImages on the iPhone

Question

I'm trying to write an animation on the iPhone, without much success, getting crashes and nothing seems to work.

What I wanna do appears simple, create a UIImage, and draw part of another UIImage into it, I got a bit confused with the context and layers and stuff.

Could someone please explain how to write something like that (efficiently), with example code?

Do you actually want a new UIImage (that you could save to disk or send over the network for example) or do you just want to layer two UIImages on the screen, one atop the other? — rpetrich, Mar 24 '09 at 21:28
I would suggest getting a good introductory book. I'm currently reading this one: http://www.iphonedevbook.com/ it has chapters on drawing and animation etc.. — bentford, Mar 25 '09 at 05:05
I want an actual UIImage, so i can use it in an animation. I read some documentations, but they all show how to draw boxes and lines, not an actual picture which is more complex. — , Mar 25 '09 at 08:26

dpjanes · Answer 1 · 2010-12-05T21:27:10.317

45

For the record, this turns out to be fairly straightforward - everything you need to know is somewhere in the example below:

+ (UIImage*) addStarToThumb:(UIImage*)thumb
{
   CGSize size = CGSizeMake(50, 50);
   UIGraphicsBeginImageContext(size);

   CGPoint thumbPoint = CGPointMake(0, 25 - thumb.size.height / 2);
   [thumb drawAtPoint:thumbPoint];

   UIImage* starred = [UIImage imageNamed:@"starred.png"];

   CGPoint starredPoint = CGPointMake(0, 0);
   [starred drawAtPoint:starredPoint];

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

   return result;
}

edited Dec 05 '10 at 21:27

answered Apr 27 '09 at 01:13

dpjanes

5,745
3
25
30

In retina display, the quality of the result image is poor. – Ali El-sayed Ali Dec 19 '10 at 13:44
3

for retina mode, use `UIGraphicsBeginImageContextWithOptions(size, NO, 0);` – Daij-Djan Jun 14 '13 at 14:18

score 9 · Answer 2 · edited May 23 '17 at 11:50

I just want to add a comment about the answer above by dpjanes, because it is a good answer but will look blocky on iPhone 4 (with high resolution retina display), since "UIGraphicsGetImageFromCurrentImageContext()" does not render at the full resolution of an iPhone 4.

Use "...WithOptions()" instead. But since WithOptions is not available until iOS 4.0, you could weak link it (discussed here) then use the following code to only use the hires version if it is supported:

if (UIGraphicsBeginImageContextWithOptions != NULL) {
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
}
else {
    UIGraphicsBeginImageContext();
}

score 4 · Answer 3 · answered Nov 11 '13 at 03:28

Here is an example to merge two images that are the same size into one. I don't know if this is the best and don't know if this kind of code is posted somewhere else. Here is my two cents.

+ (UIImage *)mergeBackImage:(UIImage *)backImage withFrontImage:(UIImage *)frontImage
{

    UIImage *newImage;

    CGRect rect = CGRectMake(0, 0, backImage.size.width, backImage.size.height);

    // Begin context
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);

    // draw images
    [backImage drawInRect:rect];
    [frontImage drawInRect:rect];

    // grab context
    newImage = UIGraphicsGetImageFromCurrentImageContext();

    // end context
    UIGraphicsEndImageContext();

    return newImage;
}

Hope this helps.

Create a UIImage from two other UIImages on the iPhone

3 Answers3

Linked