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