Objective- C: Draw border on an UIImage

Question

I currently have the following image on which I am trying to set a border. It consists of an UIImageView with an image inside (a transparent.png)

When I try to set the border for my image (see code), it gives a border to the UIImage, but it doesn't 'snap' around my image. Is it possible to achieve that effect?

See image current implementation here.

- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
  CGSize size = [source size];
  UIGraphicsBeginImageContext(size);
  CGRect rect = CGRectMake(0, 0, size.width, size.height);
  [source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0); 
  CGContextStrokeRect(context, rect);
  UIImage *testImg =  UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return testImg;
}

have a look at this: https://stackoverflow.com/questions/1354811/how-can-i-take-an-uiimage-and-give-it-a-black-border... A lot of this has to do with the normal square, but to the bottom there is an answer in regards to creating a border around funny (meaning its not square/circle etc) images/shapes — Burnie777, Jun 26 '17 at 07:23
How did you create/get that image? Did you draw it yourself? — Larme, Jun 26 '17 at 07:57
@Larme no it's an image i added (transparant .png image) from the assets — iCappsCVA, Jun 26 '17 at 08:07
Then, you have to do edge detection to find the transparent part, and make a stroke according to it. Some other idea: https://stackoverflow.com/questions/14902444/put-border-around-partially-transparent-image-being-drawn-on-cgcontext — Larme, Jun 26 '17 at 08:08

Akash Singh Sisodia · Answer 1 · 2017-06-26T12:45:24.100

Try Adding a layer behind UIImageView and add a border to it that will do the trick

#define kBorderWidth 3.0.   
#define kCornerRadius 8.0
CALayer *borderLayer = [CALayer layer];
CGRect borderFrame = CGRectMake(0, 0, (imageView.frame.size.width),    (imageView.frame.size.height));
[borderLayer setBackgroundColor:[[UIColor clearColor] CGColor]];
[borderLayer setFrame:borderFrame];
[borderLayer setCornerRadius:kCornerRadius];
[borderLayer setBorderWidth:kBorderWidth];
[borderLayer setBorderColor:[[UIColor redColor] CGColor]];
[imageView.layer addSublayer:borderLayer];

And don't forget to import QuartzCore/QuartzCore.h

This example will draw a boarder on the layer, but change it's frame slightly to make the border around the layer.

Please check the image i am using. This just adds a cornerradius to the UIImageView, not the image itself — iCappsCVA, Jun 26 '17 at 12:59

Aris · Answer 2 · 2017-06-27T11:03:35.643

Depending on your needs, if you don't want it to be as accurate as possible, a quick and dirty solution could be something like this:

- (UIImage *)borderedImageFromImage:(UIImage *)source andColor:(UIColor *)borderColor{
    CGFloat scale = 0.95;//this determines how big the border will be, the smaller it is the bigger the border
    UIImage *borderImage = [source imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIGraphicsBeginImageContextWithOptions(source.size, NO, source.scale);
    [borderColor set];
    [borderImage drawInRect:CGRectMake(0, 0, source.size.width, source.size.height)];
    [source drawInRect:CGRectMake(source.size.width*(1-scale)/2,
                                  source.size.height*(1-scale)/2,
                                  source.size.width * scale,
                                  source.size.height * scale)];
    borderImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return borderImage;
}

and here is how to use it:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.heartImageView.image = [self borderedImageFromImage:[UIImage imageNamed:@"heart"] andColor:[UIColor blackColor]];

}

What this essentially does is draw the image you want twice, once in the colour of the border (slightly scaled) and once with the normal colour. Your mileage may vary depending on the image.

how to i use it together with the original? doing a setImage overwrites it, but using your function by itself does nothing — iCappsCVA, Jun 27 '17 at 06:41
`UIImageview * imageview.image = [self borderedImageFromImage:source andColor:[UIColor blackColor]];` — Aris, Jun 27 '17 at 11:00

Objective- C: Draw border on an UIImage

2 Answers2