Add Text on UIImage

Question

Hi I am using this function to draw text on Image after the drawing on image is done but when I do this its showing me transparent text i.e. Text with opacity which I do not want it should be with alpha 1.0 I tried to add the fontcolor attribute with RGBA but dint work

-(UIImage*) drawText:(NSString*) text
             inImage:(UIImage*)  image
             atPoint:(CGPoint)   point
             atSize :(CGSize) size
{
    //[NSLog(@"Drawing Text on the Image : Text Posn x:%f  y:%f ",point.x,point.y);
    UIGraphicsBeginImageContext(_mainViewForDrawing.frame.size);

    [image drawInRect:CGRectMake(_mainViewForDrawing.frame
                                 .origin.x,_mainViewForDrawing.frame.origin.y,_mainViewForDrawing.frame.size.width,_mainViewForDrawing.frame.size.height)];
    CGPoint pt;
    pt.x = point.x + _camera2EditText.frame.size.width/2;
    pt.y = point.y + _camera2EditText.frame.size.height/2;

    UITextPosition *post = [_camera2EditText beginningOfDocument];


    CGRect r = [_camera2EditText caretRectForPosition:post];

    //[NSLog(@"Here is the rect: %f %f ",r.origin.x,r.origin.y);

    CGRect rect = CGRectMake(r.origin.x, point.y + r.origin.y, _mainViewForDrawing.frame.size.width,_mainViewForDrawing.frame.size.height);
    [[UIColor whiteColor] set];

    //UIFont *font = [UIFont boldSystemFontOfSize:TextFontSize];

    UIFont *font = [UIFont fontWithName:TEXT_FONT_NAME size:TEXT_FONT_SIZE];

    if([text respondsToSelector:@selector(drawInRect:withAttributes:)])
    {
        //iOS 7
       // NSDictionary *att = @{NSFontAttributeName:font};
        NSDictionary *att = @{ NSFontAttributeName: font, NSForegroundColorAttributeName: [UIColor whiteColor]};
        [text drawInRect:rect withAttributes:att];
    }
    else
    {
        //legacy support
        [text drawInRect:CGRectIntegral(rect) withFont:font];
    }

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

    return newImage;
}

How to go about it

score 14 · Accepted Answer · answered Aug 14 '14 at 12:26

This is my method I use for drawing text onto an image, hopefully this will help. It uses the an attributed string instead to set the properties that you want:

+(UIImage*)drawFront:(UIImage*)image text:(NSString*)text atPoint:(CGPoint)point
{
    UIFont *font = [UIFont fontWithName:@"Halter" size:21];
    UIGraphicsBeginImageContext(image.size);
    [image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
    CGRect rect = CGRectMake(point.x, (point.y - 5), image.size.width, image.size.height);
    [[UIColor whiteColor] set];

    NSMutableAttributedString* attString = [[NSMutableAttributedString alloc] initWithString:text];
    NSRange range = NSMakeRange(0, [attString length]);

    [attString addAttribute:NSFontAttributeName value:font range:range];
    [attString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:range];

    NSShadow* shadow = [[NSShadow alloc] init];
    shadow.shadowColor = [UIColor darkGrayColor];
    shadow.shadowOffset = CGSizeMake(1.0f, 1.5f);
    [attString addAttribute:NSShadowAttributeName value:shadow range:range];

    [attString drawInRect:CGRectIntegral(rect)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

Should be easy enough for you to adapt to your needs... Let me know if you struggle!

To get more quality for resulting image in code above use: UIGraphicsBeginImageContextWithOptions(image.size, NO, [[UIScreen mainScreen] scale]); And by the way, firstly check font name, if you get crashes in that method. — Dren, Jun 08 '15 at 08:40
^^ In regards to this, note that according to the documentation if you set the scale as 0.0 it defaults to the scale factor of the device's main screen, so you can just replace [[UIScreen mainScreen] scale] with 0.0 — gadu, Aug 17 '15 at 15:13

score 2 · Answer 2 · answered Jan 05 '16 at 19:48

If you want to add the text on the image and want to take the input from the user, then you can place that textview inside the UIView and make the image and merge with the background.

//Draw the text view to create a image from it

        UIGraphicsBeginImageContextWithOptions(viewInputText.bounds.size, true, 0)
        viewInputText.drawViewHierarchyInRect(viewInputText.bounds, afterScreenUpdates: true)
        let imageWithText = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        //create a UIImage from the current context and save it to camera roll.
        UIGraphicsBeginImageContextWithOptions(imgCorrection.bounds.size, true, 0)

        imgCorrection.image?.drawInRect(CGRect(x: 0, y: 0,
            width: imgCorrection.frame.size.width, height: imgCorrection.frame.size.height))

        //Draw the text image in the current context to make a single image.
        imageWithText.drawInRect(viewInputText.frame)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        //save image on the camera roll.

For more details please refer the following link

Add Text on UIImage

2 Answers2

Linked