Making a UIImage to a circle form

Question

I have been trying to mask a UIImage into a circle. I'm using now the code that has been popular on other answers here, but although I do get a circle its edges are very jagged and not smooth. Anyone can help? I do I get a perfect, smooth circle?

The code I'm using to create the mask is:

  (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {

    CGImageRef imageNoAlpha = image.CGImage;

    CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();

    CGFloat width = CGImageGetWidth(imageNoAlpha);
    CGFloat height = CGImageGetWidth(imageNoAlpha);

    CGContextRef ctxWithAlpha = CGBitmapContextCreate(nil, width, height, 8, 4*width, cs, kCGImageAlphaPremultipliedFirst);

    CGContextDrawImage(ctxWithAlpha, CGRectMake(0, 0, width, height), imageNoAlpha);

    CGImageRef imageWithAlpha = CGBitmapContextCreateImage(ctxWithAlpha);

    CGImageRef maskRef = maskImage.CGImage; 

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask(imageWithAlpha, mask);

    UIImage* retImage= [UIImage imageWithCGImage:masked];
    UIImage* retImageFixed = [retImage transparentBorderImage:1];

    CGImageRelease(mask);
    CGImageRelease(masked);
    CGImageRelease(imageWithAlpha);
    CGContextRelease(ctxWithAlpha);
    CGColorSpaceRelease(cs);

    return retImageFixed;

Thanks in advance...

May be. This two links may help for what you are looking for. 1. http://stackoverflow.com/questions/4414221/uiimage-in-a-circle 2. http://stackoverflow.com/questions/1878595/how-to-make-a-circular-uiview — iOS, Sep 13 '11 at 09:51
Thanks. I've seen many people saying that you can just use the corner radius property but that's just wrong. Although it does make the corner rounded, it never make the all image look like a circle. — Shahar Nechmad, Sep 13 '11 at 12:20

score 50 · Answer 1 · answered Feb 22 '14 at 12:46

50

try this code

yourImageView.layer.cornerRadius = yourImageView.frame.size.height /2;
yourImageView.layer.masksToBounds = YES;
yourImageView.layer.borderWidth = 0;

this show image like ios 7 circle image thanks

answered Feb 22 '14 at 12:46

Waseem Shah

2,219
23
23

1

FYI, this solution makes scrolling in table view sluggish. @aToz's solution works well. – xiaowl May 09 '14 at 08:57
4

Its working perfectly in tableView scrolling, i don't see any problem with it, my tableView contain 246 rows each row loads image from server and still working perfectly – aLFaRSi Jul 18 '14 at 21:35
@aLFaRSi what type of device are you running? Bad performing code doesnt always manifest itself at first. There may be a theory proof or benchmark both methods. – scord Nov 18 '15 at 01:39
@alFaRSi. You got lucky ;) – Jeff Feb 27 '17 at 02:45
This is using an `UIImageView` whereas the topic starter asks for a circle masked `UIImage`. – hotdogsoup.nl Dec 31 '20 at 12:50

score 28 · Answer 2 · answered Jan 24 '14 at 09:47

This might help you, pass corner radius as half of the reference view where you want to display the image or you can set a custom rect,

eg. In my case I want to display the image on a "imageView", so the corner radius in this case would be imageView.frame.size.width/2

- (void)displayImage
{
    imageView.image = [self getRoundedRectImageFromImage:@"Test.png" onReferenceView:imageView withCornerRadius: imageView.frame.size.width/2];
}



- (UIImage *)getRoundedRectImageFromImage :(UIImage *)image onReferenceView :(UIImageView*)imageView withCornerRadius :(float)cornerRadius
{
    UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
    [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds
                                cornerRadius:cornerRadius] addClip];
    [image drawInRect:imageView.bounds];
    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return finalImage;
}

The third parameter in UIGraphicsBeginImageContextWithOptions must be 0.0 instead of 1.0. Because 1.0 draws very ugly — fnc12, Aug 23 '14 at 07:19
@fnc12 thank you! I was wondering why the result was blurry and ugly. — Chen Li Yong, Mar 02 '16 at 04:17

fnc12 · Answer 3 · 2020-10-08T07:46:59.617

Sorry for ugly formatting. Better version of aToz's answer.

@interface UIImage (CircleMask)

+ (UIImage *)roundedRectImageFromImage :(UIImage *)image
                                  size :(CGSize)imageSize
                      withCornerRadius :(float)cornerRadius;

@end

@implementation UIImage(CircleMask)

+(UIImage*)roundedRectImageFromImage:(UIImage *)image
                                size:(CGSize)imageSize
                    withCornerRadius:(float)cornerRadius
{
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);   //  <= notice 0.0 as third scale parameter. It is important cause default draw scale ≠ 1.0. Try 1.0 - it will draw an ugly image..
    CGRect bounds = (CGRect){CGPointZero,imageSize};
    [[UIBezierPath bezierPathWithRoundedRect:bounds
                                cornerRadius:cornerRadius] addClip];
    [image drawInRect:bounds];
    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return finalImage;
}

@end

The same thing in Swift:

extension UIImage{

    class func roundedRectImageFromImage(image:UIImage,imageSize:CGSize,cornerRadius:CGFloat)->UIImage{
        UIGraphicsBeginImageContextWithOptions(imageSize, false, 0.0)
        let bounds = CGRect(origin: CGPointZero, size: imageSize)
        UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).addClip()
        image.drawInRect(bounds)
        let finalImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return finalImage
    }
    
}

CGPointZero is deprecated, use: CGRect(origin: .zero, size: imageSize) instead. — grebulon, Nov 12 '20 at 21:01

Sunkas · Answer 4 · 2015-09-01T07:20:14.307

A better version of aToz's and fnc12's answers (in Swift):

extension UIImage
{
    func roundImage() -> UIImage
    {
        let newImage = self.copy() as! UIImage
        let cornerRadius = self.size.height/2
        UIGraphicsBeginImageContextWithOptions(self.size, false, 1.0)
        let bounds = CGRect(origin: CGPointZero, size: self.size)
        UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).addClip()
        newImage.drawInRect(bounds)
        let finalImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return finalImage
    }
}

Usage:

self.userImageView.image = image.roundedImage()

can we crop and round for non-square images? – khunshan Mar 08 '16 at 12:29 — khunshan, Mar 08 '16 at 12:29

score 3 · Answer 5 · answered Jan 31 '20 at 00:56

Felt like I should throw my hat into the ring. An effective, compact Swift 5 solution:

extension UIImage {

    var rounded: UIImage? {
        UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
        defer { UIGraphicsEndImageContext() }
        let bounds = CGRect(origin: .zero, size: size)
        UIBezierPath(roundedRect: bounds, cornerRadius: size.height/2.0).addClip()
        draw(in: bounds)
        return UIGraphicsGetImageFromCurrentImageContext()
    }

}

score 1 · Answer 6 · answered Jun 13 '17 at 08:59

What about getting help from UIImageView

+ (UIImage *)circularImage:(UIImage *)image withDiameter:(NSUInteger)diameter
{
    CGRect frame = CGRectMake(0.0f, 0.0f, diameter, diameter);
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.clipsToBounds = YES;
    imageView.image = image;
    CALayer *layer = imageView.layer;


    layer.masksToBounds = YES;

    layer.cornerRadius =MAX( imageView.frame.size.height,imageView.frame.size.width)/2;

    UIGraphicsBeginImageContextWithOptions(imageView.bounds.size,NO, [UIScreen mainScreen].scale);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [layer renderInContext:context];


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

    return roundedImage;
}

score 1 · Answer 7 · answered Sep 16 '17 at 11:57

1

If you're using Swift, you can import 'AlamofireImage', and use one of its funcs. For circled image:

let roundImage = UIImage(named: "myImage")!.af_imageRoundedIntoCircle()

answered Sep 16 '17 at 11:57

Jovan Stankovic

4,661
4
27
16

score 0 · Answer 8 · answered Aug 05 '15 at 13:44

If you are using an UIImageView and you are looking to animate the size of the image while maintaining the rounded corners, you can apply a transformation as follows:

Objective-C

// Our UIImageView reference
@property (weak, nonatomic) IBOutlet UIImageView *myImageView;

- (void)viewDidLoad {
    [super viewDidLoad];

     myImageView.layer.cornerRadius = myImageView.frame.size.width / 2.0f;
     myImageView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.4f, 0.4f);
}

- (void)viewDidAppear:(BOOL)animated {
    [UIView animateWithDuration:1.0 animations:^{
        myImageView.transform = CGAffineTransformIdentity;
    }];
}

Swift

// Our UIImageView reference
@IBOutlet weak var myImageView:UIImageView!

override func viewDidLoad() {
    super.viewDidLoad()

    myImageView.layer.cornerRadius = myImageView.frame.size.width / 2;
    myImageView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.4, 0.4)
}

override func viewDidAppear(animated: Bool) {
    UIView.animateWithDuration(1.0) {
        myImageView.transform = CGAffineTransformIdentity;
    }
}

NOTE: This will also maintain any AutoLayout constraints.

score -1 · Answer 9 · answered Mar 22 '16 at 15:33

-1

I resolve my problem with UIBezierPath

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:yourImageView.bounds];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
yourImageView.layer.mask = maskLayer;

answered Mar 22 '16 at 15:33

intermat

19
2

score -1 · Answer 10 · answered Jan 25 '18 at 12:20

try this

UIImageView *circleImageview=[[UIImageView alloc]init];
circleImageview.frame=CGRectMake(0,10, 80, 80)]; 
circleImageview.layer.cornerRadius=circleimagview.frame.size.height/2;
 circleImageview.userInteractionEnabled=YES;
 [self.view addSubview:circleImageview];

Note:Make Sure height and width will be same of that view.

Making a UIImage to a circle form

10 Answers10

Linked