Putting text over an image programmatically in Objective-C

Question

I want to add text on an image programmatically, but I can't seem to find how to do it. I've found one solution on here, but a lot of things are deprecated so it doesn't work...

Please help!

EDIT:

Here's my code:

UIImage *backgroundImage = image;

NSMutableDictionary *stringAttributes = [NSMutableDictionary dictionary];

[stringAttributes setObject: [UIFont fontWithName:@"Helvetica" size:20] forKey: NSFontAttributeName];
[stringAttributes setObject: [UIColor whiteColor] forKey: NSForegroundColorAttributeName];
[stringAttributes setObject: [NSNumber numberWithFloat: 2.0] forKey: NSStrokeWidthAttributeName];
[stringAttributes setObject: [UIColor blackColor] forKey: NSStrokeColorAttributeName];

[backgroundImage drawInRect:CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height)];

NSString *myString = [NSString stringWithFormat:@"Yolo"];

[myString drawInRect:CGRectMake(0, 0, 200, 50) withAttributes:stringAttributes];

UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.imageView.image = result;

NEW EDIT:

I'd like to clearify some things to understand the question better. My app lets the user send a photo that they have taken themselves via text messaging or by email, and I want to add some pre-written text from strings, on the photo.

So my question is: How do I get the text from the strings, on to the photo?

Yomo · Accepted Answer · 2015-10-20T13:41:59.147

It took forever, but I figured it out.

Code:

NSMutableDictionary *stringAttributes = [NSMutableDictionary dictionary];

[stringAttributes setObject: [UIFont fontWithName:@"Avenir Book" size:250] forKey: NSFontAttributeName];
[stringAttributes setObject: [UIColor whiteColor] forKey: NSForegroundColorAttributeName];

NSString *placeString = [NSString stringWithFormat:@"Text here."];

CGSize size = [placeString sizeWithAttributes:stringAttributes];
//Create a bitmap context into which the text will be rendered.
UIGraphicsBeginImageContext(size);
//Render the text.
[placeString drawAtPoint:CGPointMake(0.0, 0.0) withAttributes:stringAttributes];
//Retrieve the image.
UIImage *imagene = UIGraphicsGetImageFromCurrentImageContext();

UIImage *mergedImage = _imageView.image;

CGSize newSize = image.size;
UIGraphicsBeginImageContext(newSize);

//Use existing opacity as is.
[mergedImage drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];

//Apply supplied opacity if applicable.
CGRect drawingRect = (CGRect) {.size = size};
drawingRect.origin.x = (newSize.width - size.width) * 0.01;
drawingRect.origin.y = (newSize.height - size.height) * 0.03;
[imagene drawInRect:drawingRect blendMode:kCGBlendModeNormal alpha:1];

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

[_imageView setImage:newImage];
self.imageView.image = newImage;

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Simply place a UILabel on top of a UIImageView in IB and position them as desired using constraints. Then set the text into the label as desired.

EDIT:

Now that I know you want to be able to save I'd suggest using UIGraphicsBeginImageContextWithOptions to create an off-screen graphics context. I find that easier to deal with than CGContext and Core Graphics calls.

Draw into the context and the fetch and image from it.

Make the context the size of your image, and pass in a scale of 0 to use the device's native scale.

Your code might look something like this:

//Create an off-screen graphics context for drawing.
CGSize imageSize = myImage.size;
UIGraphicsBeginImageContextWithOptions(imageSize, false, 0);

//draw your image using drawAtPoint(CGPointmake(0,0));
//draw your string using one of the drawAtPoint or drawInRect methods
//available in NSString UIKit additions

//Fetch the resulting image from the context.
UIImage *maskImage = UIGraphicsGetImageFromCurrentImageContext();

//End the off-screen context
UIGraphicsEndImageContext();

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 14 '15 at 23:34

Duncan C

128,072
22
173
272

I want to do it programmatically, because the user will be able to send the image via a text message, and the text must be burned on to the image :/ – Yomo Oct 14 '15 at 23:36
what do you mean by send image via text message ?@simonsayzhi – Teja Nandamuri Oct 15 '15 at 00:36
Ok, you clarified what you want my answer doesn't apply. That's fine. But why did somebody down-vote me? My answer was based on the info given in the question. – Duncan C Oct 15 '15 at 01:19
@DuncanC I've added my code to the question. It doesn't work, can you check it out please? – Yomo Oct 15 '15 at 02:49
I edited my answer to show how you could create a new image that adds text on top of an image. Did you try that? – Duncan C Oct 16 '15 at 10:28

score 0 · Answer 3 · answered Oct 14 '15 at 23:41

Here's a general approach, code is likely missing but it gives you the important bits.

 CGContextRef ctx = CGBitmapContextCreate(...)
 CGContextDrawImage (gtx, myContextRect, myimage);

 CGContextSelectFont(ctx, "Helvetica", 10.0, kCGEncodingMacRoman);
 CGContextSetCharacterSpacing(ctx, 1.7);
 CGContextSetTextDrawingMode(ctx, kCGTextFill);
 CGContextShowTextAtPoint(ctx, 100.0, 100.0, "SOME TEXT", 9);

 CGImageRef imageRef = CGBitmapContextCreateImage(ctx);
 UIImage *finalImage = [UIImage imageWithCGImage:imageRef];

This will give you an image you can put in a view, or share via UIActivityViewController. I'm sure you can work out the bits. The approach is: 1) Create bitmap context. 2) Render image 3) Add text 4) Save context to image

Putting text over an image programmatically in Objective-C

3 Answers3

EDIT:

Linked