How to position and crop UIImage in a circle - iphone

Question

I have an interface that lets you position an image within a circle and then when the you decide that it is in the right place, press a crop button and crop the visible area of the image.
Structurally I have a view that contains a scrollview that contains a UIImageView.
The first views layer has a shape layer as a mask that is shaped as a circle. this is my initialization code.
- (void)viewDidLoad
{
[super viewDidLoad];
_buttonView = [[UIView alloc]initWithFrame:CGRectMake(0, self.view.height - 136, 320, 136)];
[_buttonView setBackgroundColor:[UIColor whiteColor]];
_saveButton = [UIButton buttonWithType:UIButtonTypeCustom];
[_saveButton setTitle:#"Save image" forState:UIControlStateNormal];
[_saveButton setBackgroundImage:[[UIImage imageNamed:#"cntnt-button-defult-dark-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateNormal];
[_saveButton addTarget:self action:#selector(saveImageWasPressed:) forControlEvents:UIControlEventTouchUpInside];
[_saveButton setBackgroundImage:[[UIImage imageNamed:#"cntnt-button-pressed-dark-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateHighlighted];
[_saveButton setFrame:CGRectMake(10, 11, 300, 50)];
[_buttonView addSubview:_saveButton];
_cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
[_cancelButton setTitle:#"CANCEL" forState:UIControlStateNormal];
[_cancelButton setBackgroundImage:[[UIImage imageNamed:#"btm-button-defult-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateNormal];
[_cancelButton setBackgroundImage:[[UIImage imageNamed:#"btm-button-pressed-grey.png"] resizableImageWithNormalCapInsets] forState:UIControlStateHighlighted];
[_cancelButton setFrame:CGRectMake(10, _saveButton.bottom+7, 300, 50)];
[_buttonView addSubview:_cancelButton];
[self.view addSubview:_buttonView];
_topView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, _buttonView.yOrigin)];
[self.view addSubview:_topView];
_scrollView = [[UIScrollView alloc]initWithFrame:_topView.bounds];
[self.topView addSubview:_scrollView];
[_scrollView setDecelerationRate:0.0];
_imageView = [[UIImageView alloc]initWithFrame:CGRectZero];
[_scrollView addSubview:_imageView];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, (self.topView.height - 300)/2, 300, 300)];
_imageOverlay = [CAShapeLayer layer];
[_imageOverlay setPath:path.CGPath];
[_imageOverlay setFrame:CGRectMake(0, 0, 320, 320)];
[_topView.layer setMask:_imageOverlay];
[_imageView setImage:[UIImage imageNamed:#"portrait.jpg"]];
[_imageView setSize:_imageView.image.size];
[_scrollView setContentOffset:_imageView.center];
[_scrollView setContentSize:_imageView.image.size];
}
When the "_saveButton" is pressed I want the image to be cropped where the visible part of the _imageOverlay is.
If you have any questions for the above, please feel free to ask.
Can you please help me?

Answer 1

Once you crop your view to a circle (renderingView below):
-(UIImage *)retrieveSingletonImage:(UIView *)renderingView
{
UIGraphicsBeginImageContextWithOptions(renderingView.bounds.size, renderingView.opaque, 0.0);
[renderingView.layer renderInContext: UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return viewImage;
}
Use QuartzCore layer corner radius on the renderingView to make it a circle (diameter/2 = corner)

Answer 2

I found some snippets online that do the work.
First I crop the image in the rectangle that represents my circular overlay
- (UIImage *)getCroppedImage
{
float zoomScale = 1.0 / [_scrollView zoomScale];
CGRect rect;
rect.origin.x = [_scrollView contentOffset].x * zoomScale;
rect.origin.y = [_scrollView contentOffset].y * zoomScale;
rect.size.width =_imageOverlay.bounds.size.width *zoomScale;
rect.size.height =_imageOverlay.bounds.size.height *zoomScale;
CGImageRef cr = CGImageCreateWithImageInRect([[_imageView image] CGImage], rect);
UIImage *cropped = [UIImage imageWithCGImage:cr];
CGImageRelease(cr);
return [cropped roundedCornerImage:150 borderSize:0];
}
Then before the return I round the corners of the image and crop it again.
#implementation UIImage (RoundedCorner)
// Creates a copy of this image with rounded corners
// If borderSize is non-zero, a transparent border of the given size will also be added
// Original author: Björn Sållarp. Used with permission. See: http://blog.sallarp.com/iphone-uiimage-round-corners/
- (UIImage *)roundedCornerImage:(NSInteger)cornerSize borderSize:(NSInteger)borderSize {
// If the image does not have an alpha layer, add one
UIImage *image = [self imageWithAlpha];
CGFloat scale = [[UIScreen mainScreen] scale];
UIGraphicsBeginImageContextWithOptions(image.size, !image.hasAlpha, 0);
// Build a context that's the same dimensions as the new size
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextTranslateCTM(context, 0, image.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
// Create a clipping path with rounded corners
CGContextBeginPath(context);
[self addRoundedRectToPath:CGRectMake(borderSize, borderSize, image.size.width - borderSize * 2, image.size.height - borderSize * 2)
context:context
ovalWidth:cornerSize * scale
ovalHeight:cornerSize * scale];
CGContextClosePath(context);
CGContextClip(context);
// Draw the image to the context; the clipping path will make anything outside the rounded rect transparent
CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
// Create a CGImage from the context
UIImage *roundedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return roundedImage;
}
#end