How to combine UIImage and UILabel into one image and save

Question

I have 2 UILabels and 2 images that i need to merge into a single UIImage to save.

I know I could do it with screen shots but my main image is rounded so if I rect it, it will still show the sharp edge.

I can do this to combine the images :

//CGSize newImageSize = CGSizeMake(cropImage.frame.size.width, cropImage.frame.size.height);
CGSize newImageSize = CGSizeMake(480, 320);
NSLog(@"CGSize %@",NSStringFromCGSize(newImageSize));

UIGraphicsBeginImageContextWithOptions(newImageSize, NO, 0.0); //retina res
[self.viewForImg.layer renderInContext:UIGraphicsGetCurrentContext()];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

NSData *imgData =  UIImageJPEGRepresentation(image, 0.9); //UIImagePNGRepresentation ( image ); // get JPEG representation
UIImage * imagePNG = [UIImage imageWithData:imgData]; // wrap UIImage around PNG representation

UIGraphicsEndImageContext();
return imagePNG;

but not sure how to add in the UILabel.

Any reply is much appreciated.

score 18 · Accepted Answer · edited May 23 '17 at 12:25

18

Use [myLabel.layer renderInContext:UIGraphicsGetCurrentContext()]; to draw in current context.

For eg:-

    UIGraphicsBeginImageContextWithOptions(newImageSize, NO, 0.0); //retina res
    [self.viewForImg.layer renderInContext:UIGraphicsGetCurrentContext()];
    [myLabel.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

Based on your comments, if you want to draw this in a particular frame do it as follows,

[myLabel drawTextInRect:CGRectMake(0.0f, 0.0f, 100.0f, 50.0f)];

If you want to color the background, try this,

CGRect drawRect = CGRectMake(rect.origin.x, rect.origin.y,rect.size.width, rect.size.height); 
CGContextSetRGBFillColor(context, 100.0f/255.0f, 100.0f/255.0f, 100.0f/255.0f, 1.0f); 
CGContextFillRect(context, drawRect);

or you can check this question Setting A CGContext Transparent Background.

edited May 23 '17 at 12:25

Community

1
1

answered Nov 23 '12 at 02:28

iDev

23,310
7
60
85

Thanks for the reply ACB, however these does not answer my question. i used [myLabel drawTextInRect:CGRectMake(14, 35, 220, 40)]; – Desmond Nov 24 '12 at 09:18
@Desmond, Yes, that is also an option. I thought of adding that as well, and then decided against it since this should be enough to draw the label. If the question is to draw on a particular rect, that is correct, but couldn't see that in question. – iDev Nov 24 '12 at 09:25
no worries, i think my question are not clear enough. Thanks :) by the way do you know how to change the background colour of the UIGraphicsGetImageFromCurrentImageContext ? when i save the image, the background is WHITE. – Desmond Nov 24 '12 at 09:31
Something like, `CGRect drawRect = CGRectMake(rect.origin.x, rect.origin.y,rect.size.width, rect.size.height); CGContextSetRGBFillColor(context, 100.0f/255.0f, 100.0f/255.0f, 100.0f/255.0f, 1.0f); CGContextFillRect(context, drawRect);` or check this, http://stackoverflow.com/questions/2125543/setting-a-cgcontext-transparent-background – iDev Nov 24 '12 at 09:38

score 4 · Answer 2 · answered Feb 05 '13 at 15:07

UIEdgeInsets insets = UIEdgeInsetsMake(1, 1, 1, 1);
CGSize imageSizeWithBorder = CGSizeMake(view.frame.size.width + insets.left + insets.right, view.frame.size.height + insets.top + insets.bottom);
UIGraphicsBeginImageContextWithOptions(imageSizeWithBorder, UIEdgeInsetsEqualToEdgeInsets(insets, UIEdgeInsetsZero), 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClipToRect(context, (CGRect){{insets.left, insets.top}, view.frame.size});
CGContextTranslateCTM(context, -view.frame.origin.x + insets.left, -view.frame.origin.y + insets.top);
[view.layer renderInContext:context];
UIImage *viewCopy = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Try this!

score 2 · Answer 3 · answered Nov 24 '12 at 09:18

 UIGraphicsBeginImageContextWithOptions(newImageSize, NO, scale); //retina res
        [COGI.layer renderInContext:UIGraphicsGetCurrentContext()];
        [COGI.image drawInRect:CGRectMake(0, 0, 248, 290)];
        [iconI.image drawInRect:CGRectMake(4, 20, 240, 240)];
        [stampI.image drawInRect:CGRectMake(0, -5, 248, 290)];
        [headerL drawTextInRect:CGRectMake(14, 35, 220, 40)];
        [detailL drawTextInRect:CGRectMake(16, 200, 215, 65)];

        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        [[UIColor redColor] set]; 
        NSData *imgData =  UIImageJPEGRepresentation(image, 1.0); //UIImagePNGRepresentation ( image ); // get JPEG representation
        UIImage * imagePNG = [UIImage imageWithData:imgData]; // wrap UIImage around PNG representation

        UIGraphicsEndImageContext();
        return imagePNG;

How to combine UIImage and UILabel into one image and save

3 Answers3

Linked