Search code examples
iosimageuiimageviewswift4crop

How to crop a zoomed Image in a circular hole with swift


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 enter image description here

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