[Swift5] Runden Sie das aufgenommene Bild mit UIImagePicker ab

Hintergrund

Es kann vorkommen, dass Sie ein Bild in einem Kreis zuschneiden möchten, z. B. beim Festlegen eines Symbols. Der UIImagePicker allein kann nur als Quadrat ausgeschnitten werden und ist daher nicht bequem zu bedienen.

Montagevorgang

Wir werden es mit einer Bibliothek namens CropViewController implementieren.

  1. Wählen Sie mit UIImagePicker ein Bild aus
  2. Schneiden Sie mit CropViewController einen Kreis

Lassen Sie es uns jetzt implementieren.

1. Einführung der Bibliothek

pod 'CropViewController'

GitHub TOCropViewController

2. Das Aussehen der App


   private let imageButton = UIButton()

   func setupImageButtonn() {
        imageButton.backgroundColor = .lightGray
        //Die folgenden Einstellungen sind erforderlich
        let size: CGFloat = 100
        //Machen Sie die Breite und Höhe gleich und teilen Sie durch 2.
        imageButton.layer.cornerRadius = size / 2
        //Nicht aus dem Kreis herausragen
        imageButton.clipsToBounds = true
        imageButton.imageView?.contentMode = .scaleAspectFit
        self.view.addSubview(imageButton)
        //Automatisches Layout
        imageButton.snp.makeConstraints { (make) in
            make.center.equalTo(view)
            make.size.equalTo(size)
        }

        //Registrieren Sie den Vorgang, wenn Sie darauf tippen
        imageButton.addTarget(self, action: #selector(onTappedImageButton(_:)), for: .touchUpInside)
    }
    
    //Verarbeitung beim Antippen
    @objc func onTappedImageButton(_ sender: UIButton) {
        
    }

Das automatische Layout verwendet eine andere Bibliothek, ist jedoch auf oben, unten, links, rechts, Mitte, Höhe 100 und Breite 100 eingestellt.

Einführung von 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 {
            
        }
    }
}

Damit ist die Bildauswahl zum Öffnen abgeschlossen.

Übergeben Sie das Bild an CropViewController

Schließen Sie den Picker in der Delegate-Methode, um Cropvc anzuzeigen. Sie können den croppingStyle auch so ändern, dass er quadratisch ist.

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

Nachdem Sie das Bild mit Cropvc zugeschnitten haben, legen Sie das verarbeitete Bild in der Bildansicht der Schaltfläche fest.

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

Das ist es!

Schließlich

CropViewController ist eine Bibliothek zum Zuschneiden von Bildern und viel einfacher zu verwenden als die Bearbeitungsfunktion von ImagePicker. Obwohl in diesem Artikel nicht vorgestellt, können Sie anscheinend die Schaltfläche zum Abschließen und Abbrechen anpassen, die Schaltfläche zum Drehen löschen usw. Vielen Dank für das Lesen bis zum Ende.

Ende.

Recommended Posts

[Swift5] Runden Sie das aufgenommene Bild mit UIImagePicker ab
Bildverarbeitung: Spielen wir mit dem Bild
Hintergrundbildtransparenz (Überlagern des Bildes mit Ihrer Lieblingsfarbe)
Erste Schritte mit Swift
Beginnend mit Swift Swift UI
Erstellen Sie ein Docker-Image mit installiertem Oracle JDK (yum
[Swift 5] Wählen Sie mit der UIDate-Auswahl unter iOS14 ein Datum aus