How to create a circular image with border (UIGraphics)?

Question

P.S. I need to draw a picture.

code in viewDidLoad:

NSURL *url2 = [NSURL URLWithString:@"http://images.ak.instagram.com/profiles/profile_55758514_75sq_1399309159.jpg"];
NSData *data2 = [NSData dataWithContentsOfURL:url2];
UIImage *profileImg = [UIImage imageWithData:data2];

UIGraphicsEndImageContext();
// Create image context with the size of the background image.
UIGraphicsBeginImageContext(profileImg.size);
[profileImg drawInRect:CGRectMake(0, 0, profileImg.size.width, profileImg.size.height)];

// Get the newly created image.
UIImage *result = UIGraphicsGetImageFromCurrentImageContext();

// Release the context.
UIGraphicsEndImageContext();

// Set the newly created image to the imageView.
self.imageView.image = result;

The easiest way is to modify the imageView rather than the image. Its most certainly possible to modify the image, but its a ton easier to modify the imageView's .borderColor, .borderWidth, .cornerRadius and .maskToBounds properties ... — David Doyle, Aug 22 '14 at 14:04
@DavidDoyle I need to draw a picture. `borderWidth` not suitable — SpaceInvader, Aug 22 '14 at 14:14
@SpaceInvader, why are the `cornerRadius` or `borderWidth` not suitable? :/ — holex, Aug 22 '14 at 16:30

rob mayoff · Accepted Answer · 2014-08-22T14:58:33.707

It sounds like you want to clip the image to a circle. Here's an example:

static UIImage *circularImageWithImage(UIImage *inputImage,
    UIColor *borderColor, CGFloat borderWidth)
{

    CGRect rect = (CGRect){ .origin=CGPointZero, .size=inputImage.size };

    UIGraphicsBeginImageContextWithOptions(rect.size, NO, inputImage.scale); {

        // Fill the entire circle with the border color.
        [borderColor setFill];
        [[UIBezierPath bezierPathWithOvalInRect:rect] fill];

        // Clip to the interior of the circle (inside the border).
        CGRect interiorBox = CGRectInset(rect, borderWidth, borderWidth);
        UIBezierPath *interior = [UIBezierPath bezierPathWithOvalInRect:interiorBox];
        [interior addClip];

        [inputImage drawInRect:rect];

    }

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

    return outputImage;
}

Result:

example before/after

Which part of the Objective-C version are you having trouble understanding? — rob mayoff, Jun 03 '17 at 07:54

score 7 · Answer 2 · edited Aug 23 '14 at 14:22

7

Have you tried this ?

self.imageView.layer.borderColor = [UIColor greenColor].CGColor;
self.imageView.layer.borderWidth = 1.f;

You'll also need

self.imageView.layer.corderRadius = self.imageView.frame.size.width/2;
self.imageView.clipsToBounds = YES;

edited Aug 23 '14 at 14:22

mitrenegade

1,834
18
28

answered Aug 22 '14 at 14:28

Rémy Virin

3,379
23
42

The OP was saying in the comments to the question that `.borderColor` and `.borderWidth` is not suitable. – David Rönnqvist Aug 22 '14 at 14:30
it looks like OP wants a profile picture in a circle. I bet using borderColor and cornderRadius are the easiest and most common solutions being used out there. Unless there's some super custom drawing need, which it doesn't look like because the code is in viewDidLoad, this should work fine. – mitrenegade Aug 23 '14 at 14:13

score 1 · Answer 3 · answered Mar 17 '18 at 20:27

Swift 4 version

extension UIImage {

    func circularImageWithBorderOf(color: UIColor, diameter: CGFloat, boderWidth:CGFloat) -> UIImage {
         let aRect = CGRect.init(x: 0, y: 0, width: diameter, height: diameter)
         UIGraphicsBeginImageContextWithOptions(aRect.size, false, self.scale)

         color.setFill()
         UIBezierPath.init(ovalIn: aRect).fill()

         let anInteriorRect = CGRect.init(x: boderWidth, y: boderWidth, width: diameter-2*boderWidth, height: diameter-2*boderWidth)
         UIBezierPath.init(ovalIn: anInteriorRect).addClip()

         self.draw(in: anInteriorRect)

         let anImg = UIGraphicsGetImageFromCurrentImageContext()!
         UIGraphicsEndImageContext()

         return anImg
     }
}

How to create a circular image with border (UIGraphics)?

3 Answers3