Circular Cropper Camera with UIImagePickerController iOS?

Question

I am using UIImagePickerController with cameraSource type. but I notice that there is square cropper instead a circular cropper with "Move and Scale"

In iOS native contact app there is a circular cropper with "Move and Scale" title . But with I use UIImagePickerController with camera source type I got a square cropper without title .

Please suggest some library or code

this is the iOS native app screen shot when user choose take photo with camera . I want same

Thanks

Answer 1

I'll show how I did it.

I created a view controller (PhotoPicker) to take photos with the camera and crop them with his circle layer. It contains a tool bar at the bottom with retake and done buttons and an image view in a scroll view (see the screenshot of my PhotoPicker here: https://i.stack.imgur.com/MIPCm.jpg).

When I want to take a photo I open my PhotoPicker with this code:

let photoPickerVC=self.storyboard?.instantiateViewControllerWithIdentifier("photoPickerVC") as! PhotoPicker
photoPickerVC.modalPresentationStyle=UIModalPresentationStyle.OverFullScreen
self.presentViewController(photoPickerVC, animated: true, completion: nil)

My PhotoPicker class will need UIImagePickerControllerDelegate to take a photo.

I call this function in viewDidLoad to create the crop.

func addCropLayer(){
        //layer circle
        let circleLayer=CAShapeLayer()
        let squareLength=self.view.frame.width - 40
        innerrect=CGRectMake(20, self.view.center.y - (squareLength/2) - self.toolBar.frame.height, squareLength, squareLength)
        let path2=UIBezierPath(ovalInRect: innerrect)
        path2.usesEvenOddFillRule=true
        circleLayer.path=path2.CGPath
        circleLayer.fillColor=UIColor.clearColor().CGColor

        let path=UIBezierPath(roundedRect: CGRectMake(0, 0, UIScreen.mainScreen().bounds.width, UIScreen.mainScreen().bounds.height - toolBar.frame.height), cornerRadius: 0)
        path.appendPath(path2)
        path.usesEvenOddFillRule=true

        //black layer that contains the transparent circle
        //var fillLayer=CAShapeLayer()
        fillLayer.path=path.CGPath
        fillLayer.fillRule=kCAFillRuleEvenOdd
        fillLayer.fillColor=UIColor.blackColor().CGColor
        fillLayer.opacity=0.8

        self.view.layer.addSublayer(fillLayer)
        self.view.addSubview(toolBar)
    }

Then I call the ImagePicker in viewDidAppear:

override func viewDidAppear(animated: Bool) {
    self.showImagePickerForSourceType(UIImagePickerControllerSourceType.Camera)
}

func showImagePickerForSourceType(sourceType: UIImagePickerControllerSourceType){
        print("showImagePickerForSourceType")
        if self.imageView.isAnimating(){
            self.imageView.stopAnimating()
        }
        //var capturedImages=NSMutableArray()
        if self.capturedImages.count>0 {
            self.capturedImages.removeAllObjects()
        }

        let imagePickerController=UIImagePickerController()
        imagePickerController.modalPresentationStyle=UIModalPresentationStyle.CurrentContext
        imagePickerController.sourceType=sourceType
        imagePickerController.delegate=self
        imagePickerController.cameraDevice=UIImagePickerControllerCameraDevice.Front

        if sourceType == UIImagePickerControllerSourceType.Camera {
            imagePickerController.showsCameraControls=false
            NSBundle.mainBundle().loadNibNamed("OverlayVC", owner: self, options: nil)
            self.overlayView.frame=UIScreen.mainScreen().bounds
            imagePickerController.cameraOverlayView=self.overlayView
            self.overlayView=nil
        }

        print("presentviewcontroller")
        self.imagePickerController=imagePickerController

        let screenSize:CGSize=UIScreen.mainScreen().bounds.size
        let cameraAspectRatio:CGFloat=3.0/4.0
        print("camera aspect ratio: \(cameraAspectRatio)")
        let scale=(screenSize.height / screenSize.width) * cameraAspectRatio
        print("scale: \(scale)")
        let yOffset=(screenSize.height - screenSize.width / cameraAspectRatio)/2
        print("y offset: \(yOffset)")
        let translate:CGAffineTransform=CGAffineTransformMakeTranslation(0, yOffset)
        let fullScreen:CGAffineTransform=CGAffineTransformMakeScale(scale, scale)
        let fullTransform:CGAffineTransform=CGAffineTransformConcat(fullScreen, translate)
        self.imagePickerController.cameraViewTransform=fullTransform

        let iOS:NSString=UIDevice.currentDevice().systemVersion
        let iOSint:Int=iOS.integerValue
        print("iOS int value: \(iOSint)")

        if iOSint < 8 {
            print("ios < 8")
            var rect:CGRect=self.imagePickerController.view.frame
            rect.size.height = screenSize.width / cameraAspectRatio
            rect.size.width = screenSize.width
            print("rect: \(rect)")
            self.imagePickerController.view.frame=rect
            self.imagePickerController.view.transform=fullTransform
        }else{
            self.imagePickerController.view.frame=UIScreen.mainScreen().bounds
        }

        self.presentViewController(self.imagePickerController, animated: true, completion: nil)
    }


@IBAction func takePhoto(sender: AnyObject) {
        print("takePhoto")
        self.imagePickerController.takePicture()
    }

As you can see I call OverlayVC when I show the ImagePicker. It's another view I created, see the screenshot here: https://i.stack.imgur.com/18bs0.jpg. But its outlets are also connected to PhotoPicker. Do not create another class, just the view in storyboard and connect buttons & co to the PhotoPicker class.