background

There are times when you want to be able to crop an image in a circle, such as when setting an icon. The UIImagePicker alone can only be cut out as a rectangle, so it is not comfortable to use.

Implementation procedure

We will implement it using a library called CropViewController.

Select an image with UIImagePicker
Cut into a circle with CropViewController

Let's implement it now.

1. Introduction of the library

pod 'CropViewController'

GitHub TOCropViewController

2. App appearance


   private let imageButton = UIButton()

   func setupImageButtonn() {
        imageButton.backgroundColor = .lightGray
        //The following settings are required
        let size: CGFloat = 100
        //Make the width and height the same and divide by 2.
        imageButton.layer.cornerRadius = size / 2
        //Do not stick out of the circle
        imageButton.clipsToBounds = true
        imageButton.imageView?.contentMode = .scaleAspectFit
        self.view.addSubview(imageButton)
        //Auto layout
        imageButton.snp.makeConstraints { (make) in
            make.center.equalTo(view)
            make.size.equalTo(size)
        }

        //Register the process when tapped
        imageButton.addTarget(self, action: #selector(onTappedImageButton(_:)), for: .touchUpInside)
    }
    
    //Processing when tapped
    @objc func onTappedImageButton(_ sender: UIButton) {
        
    }

The auto layout uses another library, but it is set to top, bottom, left, right, center, height 100, and width 100.

Introduction of UIImagePicker

@objc func onTappedImageButton(_ sender: UIButton) {
        let picker = UIImagePickerController()
        picker.sourceType = .photoLibrary
        picker.allowsEditing = false
        picker.delegate = self
        self.present(picker, animated: true, completion: nil)
    }

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let originalImage = info[.originalImage] as? UIImage {
            
        }
    }
}

This completes the image picker to open.

Pass the image to CropViewController

Dismiss the picker in the delegate method to see cropvc. You can also change the croppingStyle to make it a rectangle.

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let originalImage = info[.originalImage] as? UIImage {
            let cropvc = CropViewController(croppingStyle: .circular, image: originalImage)
            cropvc.delegate = self
            
            picker.dismiss(animated: true) {
                self.present(cropvc, animated: true, completion: nil)
            }
        }
    }
    
}

After cropping the image with cropvc, set the processed image in the imageView of the button.

extension ViewController: CropViewControllerDelegate {

    func cropViewController(_ cropViewController: CropViewController, didCropToImage image: UIImage, withRect cropRect: CGRect, angle: Int) {
        self.imageButton.setImage(image, for: .normal)
        cropViewController.dismiss(animated: true, completion: nil)
    }
}

That's it!

Finally

CropViewController is a library for cropping images and is much easier to use than the editing function of ImagePicker. Although not introduced in this article, it seems that you can customize the completion button and cancel button, delete the rotation button, etc. Thank you for reading until the end.

end.

[Swift5] Round the acquired image with UIImagePicker