Add white border to UIImage

Question

My question may be very easy for you.

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

Most answers are designed to add a border to a UIImageView . In my case, I need to add a border to the UIImage with an adjustable border width.

could you help me?

Answer 1

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

Add Quartz First

 #import <QuartzCore/QuartzCore.h> 

Set properties:

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

Change 1

As you need to save the image using the frame, 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; } 

Link

Answer 2

You need to create a new context and then draw the image again:

 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 UIRectFrame border. If you need more, you need to use 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 full 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 using it is as simple as:

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