add white border to UIImage

Question

My question might be very easy for you.

I am trying to add white border to UIImage in my photo editing app. I found some questions and answers How can i take an UIImage and give it a black border?.

Most answers are for adding border to UIImageView. In my case, I need to add a border to UIImage with adjustable border width.

Could you help me please?

Follow this http://stackoverflow.com/questions/19645303/how-to-draw-a-colored-border-around-nsimage/19651545#19651545 — Hussain Shabbir, Dec 10 '14 at 07:51

Fahim Parkar · Accepted Answer · 2014-12-10T07:54:43.753

You can set the border properties on the CALayer by accessing the layer property of the UIImageView.

First, add Quartz

#import <QuartzCore/QuartzCore.h>

Set properties:

[[yourImageView layer] setBorderWidth:2.0f];
[[yourImageView layer] setBorderColor:[UIColor whiteColor].CGColor];

Edit 1

As you need to save the image with border, use below.

- (UIImage *)addBorderToImage:(UIImage *)image {
    CGImageRef bgimage = [image CGImage];
    float width = CGImageGetWidth(bgimage);
    float height = CGImageGetHeight(bgimage);

        // Create a temporary texture data buffer
    void *data = malloc(width * height * 4);

    // Draw image to buffer
    CGContextRef ctx = CGBitmapContextCreate(data,
                                                 width,
                                                 height,
                                                 8,
                                                 width * 4,
                                                 CGImageGetColorSpace(image.CGImage),
                                                 kCGImageAlphaPremultipliedLast);
    CGContextDrawImage(ctx, CGRectMake(0, 0, (CGFloat)width, (CGFloat)height), bgimage);

    //Set the stroke (pen) color
    CGContextSetStrokeColorWithColor(ctx, [UIColor greenColor].CGColor);

    //Set the width of the pen mark
    CGFloat borderWidth = (float)width*0.05;
    CGContextSetLineWidth(ctx, borderWidth);

    //Start at 0,0 and draw a square
    CGContextMoveToPoint(ctx, 0.0, 0.0);    
    CGContextAddLineToPoint(ctx, 0.0, height);
    CGContextAddLineToPoint(ctx, width, height);
    CGContextAddLineToPoint(ctx, width, 0.0);
    CGContextAddLineToPoint(ctx, 0.0, 0.0);

    //Draw it
    CGContextStrokePath(ctx);

        // write it to a new image
    CGImageRef cgimage = CGBitmapContextCreateImage(ctx);
    UIImage *newImage = [UIImage imageWithCGImage:cgimage];
    CFRelease(cgimage);
    CGContextRelease(ctx);

        // auto-released
    return newImage;
}

Reference

thank you for your help. but it just add border to UIImageView. For me, I need to add border to image .So when user save the photo, it will be saved with white border.Is there any way to add border to UIImage,please? — sasha, Dec 10 '14 at 07:44
This is not adding a border. it is painting over the image and even border width would be wrong since half of it is drawn outside the bounds. it would be simpler to create a new image context with increased size, fill with border color, draw the image to the center and then create a neq image from the context. — Sulthan, Dec 10 '14 at 08:14

score 5 · Answer 2 · edited Nov 14 '16 at 14:41

You need to create a new context and then re-draw the image into that:

UIImage *image = yourImage;
UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
[image drawAtPoint:CGPointZero];
[[UIColor whiteColor] setStroke];
UIRectFrame(CGRectMake(0, 0, image.size.width, image.size.height));
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIRectFrame draws a 1 point border. If you need more you'll need to use a UIBezierPath instead.

UIImage *image = yourImage;
UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
[image drawAtPoint:CGPointZero];
[[UIColor whiteColor] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, image.size.width, image.size.height)];
path.lineWidth = 2.0;
[path stroke];
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

For a complete implementation as a category on UIImage:

UIImage+Bordered.h

@interface UIImage (Bordered)

-(UIImage *)imageBorderedWithColor:(UIColor *)color borderWidth:(CGFloat)width;

@end

UIImage+Bordered.m

@implementation UIImage (Bordered)

-(UIImage *)imageBorderedWithColor:(UIColor *)color borderWidth:(CGFloat)width
{
    UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
    [self drawAtPoint:CGPointZero];
    [color setStroke];
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, self.size.width, self.size.height)];
    path.lineWidth = width;
    [path stroke];
    UIImage *result = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return result;
}

@end

Then to use it its as simple as:

UIImage *image = yourImage;
UIImage *borderedImage = [image imageBorderedWithColor:[UIColor whiteColor] borderWidth:2.0];

add white border to UIImage

2 Answers2

Edit 1