Adding text to image on Xcode

Question

I want to make the iphone application look like some kind of greeting card application where I could write text on top of some pre-prepared background images (cards).

• How can I write this text?
• How to save background image + text in one image file?

Thanks.

Answer 1

Here is a method that writes a string to an image. You can customize the font size and other options to customize 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; } 

Answer 2

Thanks Rayfleck! It worked.

To add additional compatibility with mesh displays (corrects intermittent letters while increasing the size of the image "@ 2x"):

replace:

 UIGraphicsBeginImageContext(img.size); 

with conditional:

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

Answer 3

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; } 

Answer 4

This approach takes into account the scale of the screen and is 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