Adding text over an image on Xcode

Question

I want to make an iphone application similar to some greeting cards application, where I could write text over some pre prepared background images(cards).

How can I write this text?
How to save the background image+the text on one image file ?

Thanks.

you can make a blank controller with the status bar hidden and make a screenshot after finished editing. I think UIImagePNGRepresentation is what you need for that. — Dani Pralea, Nov 15 '11 at 15:17
Thanks for your answers. Yes I think your solution is much more easier than using tha Core Graphics, I'll focus on that. If I understand, You mean I prepare the background image on a uiview and add a uiTextfield with transparent bachground on it, let the user input the text then make a scereenshot. Is That may be? — hafedh, Nov 15 '11 at 15:50

score 10 · Accepted Answer · edited Jan 03 '14 at 12:58

10

Here is a method that burns a string into an image. You can tweak the font size and other parameters to configure it to your liking.

/* Creates an image with a home-grown graphics context, burns the supplied string into it. */
- (UIImage *)burnTextIntoImage:(NSString *)text :(UIImage *)img {

UIGraphicsBeginImageContext(img.size);

CGRect aRectangle = CGRectMake(0,0, img.size.width, img.size.height);
[img drawInRect:aRectangle];

[[UIColor redColor] set];           // set text color
NSInteger fontSize = 14;
if ( [text length] > 200 ) {
    fontSize = 10;
}
UIFont *font = [UIFont boldSystemFontOfSize: fontSize];     // set text font

[ text drawInRect : aRectangle                      // render the text
         withFont : font
    lineBreakMode : UILineBreakModeTailTruncation  // clip overflow from end of last line
        alignment : UITextAlignmentCenter ];

UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();   // extract the image
UIGraphicsEndImageContext();     // clean  up the context.
return theImage;
}

edited Jan 03 '14 at 12:58

adamdehaven

5,890
10
61
84

answered Nov 15 '11 at 16:21

Rayfleck

12,116
8
48
74

@Rayfleck I know this is an old answer, but I just found it today and it works great, so thank you! I've just got one question. Is there a way to modify this code to draw the string vertically?(text rotated 90 degrees counterclockwise) – Ryan Jul 15 '13 at 19:51
@Ryan - first rotate the image CLOCKwise, then burn in the text, then rotate it back. Look here http://www.catamount.com/forums/viewtopic.php?f=21&t=967 for some handy UIImage extensions to do the rotations. – Rayfleck Jul 16 '13 at 15:53
It is just returning a NULL image? Any ideas? – Jack Solomon Apr 02 '14 at 23:44

score 5 · Answer 2 · answered Nov 28 '12 at 18:28

5

Thanks Rayfleck! It worked.

To add optional compatibility with retina displays (fixes choppy letters during '@2x' version of image scale up):

replace:

UIGraphicsBeginImageContext(img.size);

with conditional:

if (UIGraphicsBeginImageContextWithOptions != NULL)
    UIGraphicsBeginImageContextWithOptions(img.size,NO,0.0);
else
    UIGraphicsBeginImageContext(img.size);

answered Nov 28 '12 at 18:28

Rob

5,534
1
22
22

Glad to help! The IF statement is a quick check to see if UIGraphicsBeginImageContextWithOptions is available (ios4 or later). If not, then you can assume it's not retina. If it is, then you are passing the options: 1 - size of image (text area); 2 - transparent background (opaque = NO); and 3 - '0.0' which tells the device to use its own scale (retina displays will default to 2.0(?)) – Rob Jul 23 '13 at 17:33

score 0 · Answer 3 · answered May 14 '16 at 03:38

Update for ios7...

 /* Creates an image with a home-grown graphics context, burns the supplied string into it. */
    - (UIImage *)burnTextIntoImage:(NSString *)text :(UIImage *)img {

        UIGraphicsBeginImageContext(img.size);

        CGRect aRectangle = CGRectMake(0,0, img.size.width, img.size.height);
        [img drawInRect:aRectangle];

        [[UIColor redColor] set];           // set text color
        NSInteger fontSize = 14;
        if ( [text length] > 200 ) {
            fontSize = 10;
        }

        UIFont *font = [UIFont fontWithName:@"Courier" size:fontSize];
        NSMutableParagraphStyle *paragraphStyle = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
        paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;


        paragraphStyle.alignment = NSTextAlignmentRight;
        NSDictionary *attributes = @{ NSFontAttributeName: font,
                                      NSParagraphStyleAttributeName: paragraphStyle,
                                      NSForegroundColorAttributeName: [UIColor whiteColor]};
        [text drawInRect:aRectangle withAttributes:attributes];

        UIImage *theImage=UIGraphicsGetImageFromCurrentImageContext();   // extract the image
        UIGraphicsEndImageContext();     // clean  up the context.
        return theImage;
    }

score 0 · Answer 4 · answered Jan 24 '17 at 15:03

This approach takes in account the screen's scale and it's super intuitive

    UIImage * img = ...
    UIImageView * iV = [[UIImageView alloc] initWithImage:img];
    UILabel * l = [[UILabel alloc] initWithFrame:iV.bounds];
    l.textAlignment = ...;
    l.adjustsFontSizeToFitWidth = YES;
    l.textColor = ...;
    l.font = ...;
    l.text = ...;

    [iV addSubview:l];

    UIGraphicsBeginImageContextWithOptions(iV.bounds.size, NO, 0);
    [iV.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return finalImage

Adding text over an image on Xcode

4 Answers4

Linked