Is it possible to trim a UIImage to circular form?

Question

I was wondering if it was possible to set the corner radius of a UIImage and then save that trimmed UIImage (to Parse).

I'd like the image being uploaded to Parse be circular and I was wondering if I could set the corner radius like this, then upload the image to Parse. Would parse save the image as this?

meImage.layer.cornerRadius = meImage.frame.size.width/2

Avi · Accepted Answer · 2015-05-01T22:26:05.390

0

You need to draw image. Try this-

- (UIImage *)imageByDrawingCircleOnImage:(UIImage *)image
{
  UIGraphicsBeginImageContext(image.size);
  [image drawAtPoint:CGPointZero];
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  [[UIColor redColor] setStroke];

  // make circle rect 5 px from border
  CGRect circleRect = CGRectMake(0, 0,
                          image.size.width,
                               image.size.height);
  circleRect = CGRectInset(circleRect, 5, 5);
  CGContextStrokeEllipseInRect(ctx, circleRect);
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return image ;

}

edited May 01 '15 at 22:26

answered May 01 '15 at 22:02

Avi

2,196
18
18

Is that a perfect circle? – smecperson May 01 '15 at 22:12
Alright. What's "ctx". You didn't show it in the code your provided – smecperson May 01 '15 at 22:23
Sorry, copy/paste mistake. Please refer edited answer. – Avi May 01 '15 at 22:26
I added this right after `UIGraphicsBeginImageContext`: `CGContextRef context = UIGraphicsGetCurrentContext();`. Also, I tried the code, but it doesn't crop it. It just draws an ellipse. http://i.imgur.com/JmrPfJe.jpg – smecperson May 01 '15 at 22:28
I tried this solution (http://stackoverflow.com/questions/7399343/making-a-uiimage-to-a-circle-form) by fnc12, but it comes out like an oval: http://i.imgur.com/lSyTbmd.png – smecperson May 01 '15 at 22:44
That image looks like it is in a rectangle and not a square rect frame. If that is the case there is no way to round the corners without it being elliptical.... – Rich Fox May 02 '15 at 00:03
you could however, put it in an UIImageView first and change the rect to be a square with your desired contentMode, and then grab the UIImage from what is being rendered in the UIImageView, and then use the method on that UIImage. – Rich Fox May 02 '15 at 00:06

score 0 · Answer 2 · answered May 02 '15 at 22:45

Well I have no idea why you accepted that answer, it does not do what you asked for at all.

The most direct answer to your question is this, no it is not possible to trim an image data representation to a circle, they are always a rectangle.. So the next best thing is to make the parts of the image which are not inside the circle transparent.
In order for this to work properly you'll need to use a data representation which supports transparency when you get a NSData representation to upload to the server. In iOs this means using the PNG format rather than the JPG one.

Ok so here is some code that'll do it.

//i'd put this in a category on UIImage, therefore we don't need a pointer to the original image, which will be 'self'

-(UIImage *)imageCroppedToCircleOfDiameter:(CGFloat )diameter{

//most images will be rectangular, (height != width)
//so work out how it is going to scale
CGFloat scale = CGFloat(fmaxf(diameter/self.size.width, diameter/self.size.height) );

CGRect imageRct = CGRectZero; //where we'l draw the image
CGRect circleRct = CGRectZero; //where we'll 'cut' a circle from the context

circleRct.size.width = circleRct.size.height = diameter;

imageRct.size.width = self.size.width*scale;
imageRct.size.height = self.size.height*scale;
imageRct.origin.x = ((self.size.height>self.size.width)? 0.0: ((imageRct.size.height-imageRct.size.width)/2.0)   );
imageRct.origin.y = ((self.size.width>self.size.height)? 0.0: ((imageRct.size.width-imageRct.size.height)/2.0)   );



UIGraphicsBeginImageContextWithOptions(circleRct.size, NO, 0.0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextAddEllipseInRect( ctx, circleRct);
CGContextClip(context);

[self drawInRect:imageRct];


CGContextRestoreGState(ctx);

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

 return result;
}

Is it possible to trim a UIImage to circular form?

2 Answers2