How to crop image inside the circle in UIImageView in iOS

Question

I have an app where I have a UIImageView which displays main image and another UIImageView being used as a mask which shows a circle which is trans

Answer 1

#import "ViewController.h"

@interface ViewController ()


 @property (weak, nonatomic) IBOutlet UIImageView *imageView;
 @property (weak, nonatomic) IBOutlet UIImageView *crppedImageView;


 @property (nonatomic) CGFloat circleRadius;
 @property (nonatomic) CGPoint circleCenter;

 @property (nonatomic, weak) CAShapeLayer *maskLayer;
 @property (nonatomic, weak) CAShapeLayer *maskSubLayer;
 @property (nonatomic, weak) CAShapeLayer *circleLayer;

 @property (nonatomic, weak) UIPinchGestureRecognizer *pinch;
 @property (nonatomic, weak) UIPanGestureRecognizer   *pan;


@end

@implementation ViewController


 - (void)viewDidLoad
{
 [super viewDidLoad];

// create layer mask for the image

CAShapeLayer *maskLayer = [CAShapeLayer layer];
CGRect maskRect = self.imageView.frame;

// Create a path with the rectangle in it.
CGPathRef path = CGPathCreateWithRect(maskRect, NULL);

      // Set the path to the mask layer.
       maskLayer.path = path;

   //    maskLayer.fillRule = kCAFillRuleEvenOdd;
  //    maskLayer.fillColor = [UIColor blueColor].CGColor;
  //    maskLayer.opacity = 0.5;

self.imageView.layer.mask = maskLayer;
self.maskLayer = maskLayer;

CAShapeLayer *maskLayer1 = [CAShapeLayer layer];
CGRect maskRect1 = self.imageView.frame;

// Create a path with the rectangle in it.
CGPathRef path1 = CGPathCreateWithRect(maskRect1, NULL);

// Set the path to the mask layer.
maskLayer1.path = path1;

[self.imageView.layer.mask addSublayer:maskLayer1];
self.maskSubLayer = maskLayer1;


// create shape layer for circle we'll draw on top of image (the boundary of the circle)

CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = 3.0;
circleLayer.fillColor = [[UIColor blueColor] CGColor];
circleLayer.fillRule = kCAFillRuleEvenOdd;
circleLayer.opacity = 0.5;
circleLayer.strokeColor = [[UIColor blackColor] CGColor];
[self.imageView.layer addSublayer:circleLayer];
self.circleLayer = circleLayer;

// create circle path

[self updateCirclePathAtLocation:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0) radius:self.view.bounds.size.width * 0.30];

// create pan gesture

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
pan.delegate = self;
[self.imageView addGestureRecognizer:pan];
self.imageView.userInteractionEnabled = YES;
self.pan = pan;

// create pan gesture

UIPinchGestureRecognizer *pinch = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinch:)];
pinch.delegate = self;
[self.view addGestureRecognizer:pinch];
self.pinch = pinch;
 }

    - (void)updateCirclePathAtLocation:(CGPoint)location radius:(CGFloat)radius
  {
self.circleCenter = location;
self.circleRadius = radius;

UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:self.circleCenter
                radius:self.circleRadius
            startAngle:0.0
              endAngle:M_PI * 2.0
             clockwise:YES];

UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.imageView.bounds.size.width, self.imageView.bounds.size.height) cornerRadius:0];
[path1 appendPath:path];
[path1 setUsesEvenOddFillRule:YES];


self.maskSubLayer.path = [path1 CGPath];
    self.circleLayer.path = [path1 CGPath];

}

    - (IBAction)didTouchUpInsideSaveButton:(id)sender
   {
NSString *documentsPath = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES)[0];
NSString *path = [documentsPath stringByAppendingPathComponent:@"image.png"];

CGFloat scale  = [[self.imageView.window screen] scale];
CGFloat radius = self.circleRadius * scale;
CGPoint center = CGPointMake(self.circleCenter.x * scale, self.circleCenter.y * scale);

CGRect frame = CGRectMake(center.x - radius,
                          center.y - radius,
                          radius * 2.0,
                          radius * 2.0);

// temporarily remove the circleLayer

CALayer *circleLayer = self.circleLayer;
[self.circleLayer removeFromSuperlayer];

// render the clipped image

UIGraphicsBeginImageContextWithOptions(self.imageView.frame.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
if ([self.imageView respondsToSelector:@selector(drawViewHierarchyInRect:afterScreenUpdates:)])
{
    // if iOS 7, just draw it

    [self.imageView drawViewHierarchyInRect:self.imageView.bounds afterScreenUpdates:YES];
}
else
{
    // if pre iOS 7, manually clip it

    CGContextAddArc(context, self.circleCenter.x, self.circleCenter.y, self.circleRadius, 0, M_PI * 2.0, YES);
    CGContextClip(context);
    [self.imageView.layer renderInContext:context];
}

// capture the image and close the context

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

// add the circleLayer back

[self.imageView.layer addSublayer:circleLayer];

// crop the image

CGImageRef imageRef = CGImageCreateWithImageInRect([image CGImage], frame);
UIImage *croppedImage = [UIImage imageWithCGImage:imageRef];

_crppedImageView.layer.cornerRadius = _crppedImageView.frame.size.height /2;
_crppedImageView.layer.masksToBounds = YES;
_crppedImageView.layer.borderWidth = 0;
self.crppedImageView.image = croppedImage;
// save the image

NSData *data = UIImagePNGRepresentation(croppedImage);
[data writeToFile:path atomically:YES];

// tell the user we're done

[[[UIAlertView alloc] initWithTitle:nil message:@"Saved" delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil] show];
 }


    #pragma mark - Gesture recognizers

      - (void)handlePan:(UIPanGestureRecognizer *)gesture
 {
static CGPoint oldCenter;
CGPoint tranlation = [gesture translationInView:gesture.view];

if (gesture.state == UIGestureRecognizerStateBegan)
{
    oldCenter = self.circleCenter;
}

CGPoint newCenter = CGPointMake(oldCenter.x + tranlation.x, oldCenter.y + tranlation.y);

[self updateCirclePathAtLocation:newCenter radius:self.circleRadius];
 }

  - (void)handlePinch:(UIPinchGestureRecognizer *)gesture
 {
static CGFloat oldRadius;
CGFloat scale = [gesture scale];

if (gesture.state == UIGestureRecognizerStateBegan)
{
    oldRadius = self.circleRadius;
}

CGFloat newRadius = oldRadius * scale;

[self updateCirclePathAtLocation:self.circleCenter radius:newRadius];
}


 #pragma mark - UIGestureRecognizerDelegate

    - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
   {
      if ((gestureRecognizer == self.pan   && otherGestureRecognizer == self.pinch) ||
    (gestureRecognizer == self.pinch && otherGestureRecognizer == self.pan))
{
    return YES;
}

return NO;
 }

   - (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
 }

   @end