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?

Answer 1

Several approaches are possible.

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

2. 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];
   

3. 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.

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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).