How to convert text to Image on iOS?

Question

I am trying to write a function to convert the textfield text to an image (example). I have tried to search for an example, most of the sample also is overwrite text on image. Is it possible to give me some example or hints on how to do that?

i need this function is because i get data from the server. if the data had image, then the UIIMAGEView will show the image, but if dont have image, then i need convert the part of content to image and show on the UIIMAGEVIEW. — Lazarus, May 09 '14 at 04:11
Have a look at my solution here. Swift 3 : [Converting Text to UIImage iOS](http://stackoverflow.com/a/43109230/6665075) — Ankit Kumar Gupta, Mar 30 '17 at 05:29
See [my Swift 4 / iOS 11 answer for a similar question](https://stackoverflow.com/a/45821857/1966109) that shows up to 6 different ways to convert text into an image (or a view) in order to display it. — Imanou Petit, Aug 23 '17 at 19:21

Rob · Accepted Answer · 2014-05-09T12:12:12.433

Several approaches are possible.

If you have an existing UITextField, UITextView or UILabel that you just want to render as an image, you can employ the traditional snapshot approaches, such as:

- (UIImage *)imageForView:(UIView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, NO, 0);

    if ([view respondsToSelector:@selector(drawViewHierarchyInRect:afterScreenUpdates:)])
        [view drawViewHierarchyInRect:view.bounds afterScreenUpdates:YES];  // if we have efficient iOS 7 method, use it ...
    else
        [view.layer renderInContext:UIGraphicsGetCurrentContext()];         // ... otherwise, fall back to tried and true methods

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

    return image;
}

If you wanted a generic "create image from text" routine, in iOS 7, it would look like:

- (UIImage *)imageFromString:(NSString *)string attributes:(NSDictionary *)attributes size:(CGSize)size
{
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    [string drawInRect:CGRectMake(0, 0, size.width, size.height) withAttributes:attributes];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

The above will create an image whose size will vary based upon the text. Clearly, if you just want a fixed size image, then use constants frame, rather than dynamically building it.

Anyway, you could then use the above like so:

NSString *string = @"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

NSDictionary *attributes = @{NSFontAttributeName            : [UIFont systemFontOfSize:20],
                             NSForegroundColorAttributeName : [UIColor blueColor],
                             NSBackgroundColorAttributeName : [UIColor clearColor]};

UIImage *image = [self imageFromString:string attributes:attributes size:self.imageView.bounds.size];

If you need to support earlier iOS versions, you could use this technique:

- (UIImage *)imageFromString:(NSString *)string font:(UIFont *)font size:(CGSize)size
{
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    [string drawInRect:CGRectMake(0, 0, size.width, size.height) withFont:font lineBreakMode: NSLineBreakByWordWrapping];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

There are many, many permutations of each of these. It just depends upon what you are trying to achieve.

Another approach is to simply have both UIImageView and UILabel/UITextView objects in the view, and if you have an image from the server, set the image of the UIImageView, and text, set the text of the UILabel/UITextView.

Nice answer! If you need to convert colored text to an image for something that is tintable, e.g. a UIBarButtonItem, you have two options: 1) set the tint color for the item, like: [buttonItem setTintColor:color]; 2) specify the rendering mode before returning the uiimage, like: return [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; — Andreas K, Nov 17 '15 at 10:34
@Rob though this is very old answer... i would like to implement option (3) from your answer. But its placing text in left align. How can i make it center align? I want only two letters in image. — Jay Pandya, Sep 08 '16 at 13:31
Why not option 2? In that case you have http://stackoverflow.com/a/477658/1271826. If you don't do that, you have to manually calculate the bounding rectangle that a line of text will take and then offset the `origin` of where you draw it by the right amount. Option 2 is much easier. — Rob, Sep 08 '16 at 13:37

score 9 · Answer 2 · answered May 09 '14 at 05:49

NSString *string = @"Some text";
UIGraphicsBeginImageContext(CGSizeMake(80, 50));
[string drawAtPoint:CGPointMake(10, 20)
           withFont:[UIFont systemFontOfSize:12]];
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

You can start with this

score 5 · Answer 3 · edited Jun 20 '20 at 09:12

Swift answer

If you only need to get a an image of the visible content of a UIFieldView, UITextView, or UILabel then you can use the following method.

func imageFromView(myView: UIView) -> UIImage {

    UIGraphicsBeginImageContextWithOptions(myView.bounds.size, false, UIScreen.mainScreen().scale)
    myView.drawViewHierarchyInRect(myView.bounds, afterScreenUpdates: true)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return image
}

Special case

When the text content scrolls out of the frame, such as in a UITextView, the solution above will only capture the visible area. In order to get everything, one solution is to resize a copy of the text view to the size of its content view before making an image of it.

func imageFromTextView(textView: UITextView) -> UIImage {

    // Make a copy of the textView first so that it can be resized 
    // without affecting the original.
    let textViewCopy = UITextView(frame: textView.frame)
    textViewCopy.attributedText = textView.attributedText
    
    // resize if the contentView is larger than the frame
    if textViewCopy.contentSize.height > textViewCopy.frame.height {
        textViewCopy.frame = CGRect(origin: CGPointZero, size: textViewCopy.contentSize)
    }
    
    // draw the text view to an image
    UIGraphicsBeginImageContextWithOptions(textViewCopy.bounds.size, false, UIScreen.mainScreen().scale)
    textViewCopy.drawViewHierarchyInRect(textViewCopy.bounds, afterScreenUpdates: true)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    
    return image
}

Notes

One could also just resize the original text view and then resize it back again. However, it seemed simpler to just make a temporary copy.
Another way to get a copy of a view is to archive and unarchive it.
Or you could just write directly to a UIImage.

This was a great help. Thanks for sharing this. – Ivan Cantarino May 01 '20 at 19:20 — Ivan Cantarino, May 01 '20 at 19:20

score 3 · Answer 4 · edited May 23 '17 at 11:47

You could try creating your own custom UIView subclass, drawing an NSString on it (your text), then converting that to a UIImage. You can draw text on a UIView only in the -drawRect: method. Here is an idea for your subclass.

@interface TextView : UIView {
    NSString *_text;
}
- (id)initWithFrame:(CGRect)frame andText:(NSString *)text;
@end

@implementation TextView
- (id)initWithFrame:(CGRect)frame andText:(NSString *)text
{
    if (self = [super initWithFrame:frame]) {
        _text = text;
    }
    [self setNeedsDisplay]; // calls the -drawRect method
    return self;
}

- (void)drawRect:(CGRect)rect
{
    [_text drawAtPoint:/* location of text*/ 
        withAttributes:/* style    of text*/];
}

More information about drawing NSStrings can be found here. Once you have this view with your text on it, convert it to a UIImage with this technique.

score 1 · Answer 5 · answered May 09 '14 at 05:12

It's simple. You want to convert text to UIImage. Just draw text view's layer into Image context and convert into UIImage. code is below.

+ (UIImage *) imageWithView:(UITextView *)view
{
    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];

    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return img;
}

score 1 · Answer 6 · answered Dec 06 '18 at 02:14

It's center align version.

- (UIImage *)imageFromString:(NSString *)string size:(CGSize)size
{
    NSDictionary *attributes = @{NSFontAttributeName            : [UIFont systemFontOfSize:18],
                                 NSForegroundColorAttributeName : [UIColor whiteColor],
                                 NSBackgroundColorAttributeName : [UIColor redColor]
                                 };    

    UIGraphicsBeginImageContext(size);
    CGRect txtRect = [string boundingRectWithSize:CGSizeZero
                                       options:NSStringDrawingUsesLineFragmentOrigin
                                    attributes:attributes
                                       context:nil];

    [string drawAtPoint:CGPointMake(size.width/2 - txtRect.size.width/2, size.height/2 - txtRect.size.height/2) withAttributes:attributes];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return image;
}

Use with this way

NSString *string = @"A";

UIImage *image = [self imageFromString:string size:imgView.bounds.size];
[imgView.bounds setImage:image];
[imgView.bounds setBackgroundColor:[UIColor redColor];//Full margin with same color of text image color.

score 0 · Answer 7 · edited Oct 20 '16 at 05:16

NSString * ImgString = [[[self.dataDict valueForKey:@"newsItems"]objectAtIndex:indexPath.row]valueForKey:@"image"];

NSURL *imageURL = [NSURL URLWithString:ImgString];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];

cell.imageLabel.image = image;

I want to present in table view so I am writing this code in cell for row at index path.

(dataDict is my dictionary where I got all my data).

How to convert text to Image on iOS?

7 Answers7

Swift answer

Linked