[FIXED] How to crop a zoomed Image in a circular hole with swift

Issue

I am taking picture with camera in my app. I have a layer on top of my image view with a transparent hole as shown in the figure

What I want to do is crop the image in that circular hole. I am using that code but it is not working

UIGraphicsBeginImageContextWithOptions(CGSize(width: radius-60, height: radius-60),false,0)
final!.draw(at: CGPoint(x: 30, y: screenHeight/2 - radius/2 + 30)
let tmpImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

where the height and width in UIGraphicsBeginImageContextWithOptions are the height and width of the circular hole and x and y in draw are the x coordinate of the hole and y coordinate is the upper boundary of the hole

Code For image

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    print("here123")
    let image = info[UIImagePickerControllerOriginalImage] as! UIImage
    imageView.contentMode = .scaleAspectFit
    imageView.image = image
    self.view.backgroundColor = UIColor.black
    picker.dismiss(animated: true, completion: nil)
    photoSave()
}

Code for transparent hole

screenWidth = self.view.frame.width
screenHeight = self.view.frame.height 
radius = min(screenWidth,screenHeight)
let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: screenWidth, height: screenHeight), cornerRadius: 0)
let circlePath = UIBezierPath(roundedRect: CGRect(x: 30, y: screenHeight/2 - radius/2 + 30 , width: radius-60, height: radius - 60), cornerRadius: radius/2 - 30)

path.append(circlePath)
path.usesEvenOddFillRule = true
fillLayer.path = path.cgPath
fillLayer.fillRule = kCAFillRuleEvenOdd
fillLayer.fillColor = UIColor.black.cgColor
fillLayer.opacity = 0.5
view.layer.addSublayer(fillLayer)

Solution

You could use this to round a UIImage:

func roundedImage(from image: UIImage, radius: CGFloat) -> UIImage {
    let frame = CGRect(x: 0, y: 0, width: 2 * radius, height: 2 * radius)
    let imageView: UIImageView = UIImageView(frame: frame)
    imageView.image = image

    let layer = imageView.layer
    layer.masksToBounds = true
    layer.cornerRadius = radius

    UIGraphicsBeginImageContext(imageView.bounds.size)
    layer.render(in: UIGraphicsGetCurrentContext()!)
    let roundedImg = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return roundedImg!
}

let img = UIImage(named: "NameOfTheImage")!
let r: CGFloat = 300
roundedImage(from: img, withRadius: r)

---

To render the image in a specific circle, and not just round the image, use the following:

UIGraphicsBeginImageContext(newImageView.bounds.size)

let frame = CGRect(x: 30, y: screenHeight/2 - radius/2 + 30, width: radius - 60, height: radius - 60)

guard let img = imageView.image, let cgImage = img.cgImage, let croppedCGImage = cgImage.cropping(to: frame) else {
    fatalError("Couldn't crop the image")
}

let newImage = UIImage(cgImage: croppedCGImage)
let newImageView: UIImageView = UIImageView(image: newImage)

let layer = newImageView.layer
layer.masksToBounds = true
layer.cornerRadius = radius

layer.render(in: UIGraphicsGetCurrentContext()!)
guard let roundedImg = UIGraphicsGetImageFromCurrentImageContext() else {
    fatalError("Couldn't render the image")
}

UIGraphicsEndImageContext()

// use roundedImg

Answered By - ielyamani

Answer Checked By - Pedro (PHPFixing Volunteer)