[Swift5]UIImagePickerで取得画像を丸くする

# 背景

アイコンの設定時などに円形で画像を切り取れるようにしたい時があると思います。
UIImagePicker単体だと四角形でしか切り取ることができないので、使い心地がいまいちです。

# 実装手順
CropViewControllerというライブラリを使用して実装していきます。

 1. UIImagePickerで画像を選択
 1. CropViewControllerで円形に切り取る
 
では、早速実装していきましょう。

## 1. ライブラリの導入
```
pod 'CropViewController'
```

[GitHub TOCropViewController](https://github.com/TimOliver/TOCropViewController)

## 2. アプリの見た目

``` Swift

   private let imageButton = UIButton()

   func setupImageButtonn() {
        imageButton.backgroundColor = .lightGray
        //以下の設定が必須です
        let size: CGFloat = 100
        //横幅と縦幅を同じにして2で割る
        imageButton.layer.cornerRadius = size / 2
        //円からはみ出ないようにする
        imageButton.clipsToBounds = true
        imageButton.imageView?.contentMode = .scaleAspectFit
        self.view.addSubview(imageButton)
        //オートレイアウト
        imageButton.snp.makeConstraints { (make) in
            make.center.equalTo(view)
            make.size.equalTo(size)
        }

        //タップされたときの処理を登録
        imageButton.addTarget(self, action: #selector(onTappedImageButton(_:)), for: .touchUpInside)
    }
    
    //タップされたときの処理
    @objc func onTappedImageButton(_ sender: UIButton) {
        
    }
```
オートレイアウトは別のライブラリを使っていますが、 上下左右中央, 縦幅100, 横幅100に設定しています。

## UIImagePickerの導入

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

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

これでImagePickerが開くところまで完成です。

## CropViewControllerに画像を渡す

delegateメソッド内でpickerをdismissしてcropvcを表示します。
croppingStyleを変更すると四角形にもできます。

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

```

cropvcで画像を切り抜いたあとは、加工後の画像をボタンのimageViewにセットします。

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

以上で完成です！

##　最後に
CropViewControllerは画像トリミング用のライブラリで、ImagePickerの編集機能よりもはるかに使いやすいですね。
本記事では紹介していませんが、完了ボタンやキャンセルボタンのカスタマイズ、回転ボタンの削除等もできるようです。
最後まで読んでいただきありがとうございました。

おわり。