[Swift5] Arrondissez l'image acquise avec UIImagePicker

Contexte

Il peut arriver que vous souhaitiez pouvoir recadrer une image dans un cercle, par exemple lors de la définition d'une icône. Le UIImagePicker seul ne peut être découpé qu'en carré, il n'est donc pas confortable à utiliser.

Procédure de montage

Nous allons l'implémenter à l'aide d'une bibliothèque appelée CropViewController.

1. Sélectionnez une image avec UIImagePicker
2. Découpez en cercle avec CropViewController

Implémentons-le maintenant.

1. Présentation de la bibliothèque

pod 'CropViewController'

GitHub TOCropViewController

2. L'apparence de l'application

   private let imageButton = UIButton()

   func setupImageButtonn() {
        imageButton.backgroundColor = .lightGray
        //Les paramètres suivants sont requis
        let size: CGFloat = 100
        //Faites la même largeur et hauteur et divisez par 2.
        imageButton.layer.cornerRadius = size / 2
        //Ne sortez pas du cercle
        imageButton.clipsToBounds = true
        imageButton.imageView?.contentMode = .scaleAspectFit
        self.view.addSubview(imageButton)
        //Disposition automatique
        imageButton.snp.makeConstraints { (make) in
            make.center.equalTo(view)
            make.size.equalTo(size)
        }

        //Enregistrez le processus lorsque vous appuyez sur
        imageButton.addTarget(self, action: #selector(onTappedImageButton(_:)), for: .touchUpInside)
    }
    
    //Traitement une fois tapé
    @objc func onTappedImageButton(_ sender: UIButton) {
        
    }

La présentation automatique utilise une autre bibliothèque, mais elle est définie sur haut, bas, gauche, droite, centre, hauteur 100 et largeur 100.

Introduction de 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 {
            
        }
    }
}

Ceci termine le sélecteur d'images à ouvrir.

Passez l'image à CropViewController

Ignorez le sélecteur dans la méthode déléguée pour afficher cropvc. Vous pouvez également modifier le CroppingStyle pour le rendre carré.

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)
            }
        }
    }
    
}

Après avoir recadré l'image avec cropvc, définissez l'image traitée dans l'imageView du bouton.

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)
    }
}

C'est ça!

finalement

CropViewController est une bibliothèque pour le rognage d'images, et il est beaucoup plus facile à utiliser que la fonction d'édition d'ImagePicker. Bien que cela ne soit pas présenté dans cet article, il semble que vous puissiez personnaliser le bouton d'achèvement et le bouton d'annulation, supprimer le bouton de rotation, etc. Merci d'avoir lu jusqu'au bout.

fin.