IOS Custom UIImagePickerController Camera Crop circle, square, triangular shape?

enter image description here

How can I add a circular, triangular, square image overlay in the UIImagepickercontroller according to the above picture
and when the user presses the camera button, only the image needs to be captured inside the circular or triangular or square.
I used below code but didn't give correct result. kindly see below pic. Which is exactly the opposite of what I want to achieve.

enter image description here

-(void)openCamera {

    self.pickerController = [[UIImagePickerController alloc] init];
    self.pickerController.delegate = self;

    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
    {

        [self.pickerController setSourceType:UIImagePickerControllerSourceTypeCamera];


    } else {

        UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"Tatoo App" message:@"No Camera Available" delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];

        [alertView show];

    }


    self.pickerController.allowsEditing = NO;
    self.pickerController.showsCameraControls = NO;


    // creating overlayView
    self.overlayView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.pickerController.view.frame.size.width-20, self.pickerController.view.frame.size.height)];
    // letting png transparency be
    self.overlayView .backgroundColor = [UIColor colorWithRed:0/255 green:0/255 blue:0/255 alpha:0.5];

    [self.overlayView .layer setOpaque:NO];
    self.overlayView .opaque = NO;

    /*
    UIView *circleView = [[UIView alloc]initWithFrame:CGRectMake(self.pickerController.view.frame.size.width/4, self.pickerController.view.frame.size.width/4, self.pickerController.view.frame.size.width/2, self.pickerController.view.frame.size.height/4)];

    circleView.backgroundColor = [UIColor greenColor];

    circleView.layer.cornerRadius = circleView.frame.size.width / 2;
    circleView.clipsToBounds = YES;


    [self.overlayView addSubview:circleView];
    [self.overlayView bringSubviewToFront:circleView];
    */
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    self.overlayView.layer.mask = maskLayer;
    self.maskLayer = maskLayer;

    // 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 clearColor] CGColor];
    circleLayer.strokeColor = [[UIColor blackColor] CGColor];
    [self.overlayView.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];

    CGFloat scale  = [[self.overlayView.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.imageOverlay.frame.size, NO, 0.0);
    CGContextRef context = UIGraphicsGetCurrentContext();
    if ([self.overlayView respondsToSelector:@selector(drawViewHierarchyInRect:afterScreenUpdates:)])
    {
        // if iOS 7, just draw it

        [self.overlayView drawViewHierarchyInRect:self.overlayView.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.overlayView.layer renderInContext:context];
    }

    // capture the image and close the context

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

    // add the circleLayer back

    [self.overlayView.layer addSublayer:circleLayer];

    // crop the image

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




  self.takePicture = [UIButton buttonWithType:UIButtonTypeRoundedRect];
     self.takePicture.frame = CGRectMake(80.0, self.pickerController.view.frame.size.height-100, 150.0, 30.0);
     self.takePicture.tag = 0;
    [ self.takePicture setTitle:@"Take" forState:UIControlStateNormal];
    [ self.takePicture addTarget:self action:@selector(takeSnapShot:) forControlEvents:UIControlEventTouchUpInside];
    [self.overlayView  addSubview: self.takePicture];

    self.pickerController.cameraOverlayView = self.overlayView;


    [self presentViewController:self.pickerController animated:YES completion:nil];

}

      

+3


source to share





All Articles