【Xcode/Swift】CLImageEditorというライブラリを使用してみよう

今回はClImageEditorというライブラリを使って画像を加工してみます、実装もシンプルです。

Storyboardの設定、ライブラリのインストール

Storyboard


ライブラリのインストール

pod 'CLImageEditor/AllTools'

インストールが完了したら白いプロジェクトファイルで開き直しましょう。

コードの記述、ビルドをして確認

コードの記述 & Info.plistの追記(カメラとアルバムを使う為)

import UIKit
import CLImageEditor

class HomeViewController: UIViewController {

    @IBOutlet private weak var imageView: UIImageView!
    @IBOutlet private weak var albumButton: UIButton!
    @IBOutlet private weak var cameraButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func openAlbumAction(_ sender: Any) {
        // ライブラリ(カメラロール) を指定してピッカーを開く
        if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
            let pickerController = UIImagePickerController()
            pickerController.delegate = self
            pickerController.sourceType = .photoLibrary
            self.present(pickerController, animated: true, completion: nil)
        }
    }

    @IBAction func openCameraAction(_ sender: Any) {
        // カメラを指定してピッカーを開く
        if UIImagePickerController.isSourceTypeAvailable(.camera) {
            let pickerController = UIImagePickerController()
            pickerController.delegate = self
            pickerController.sourceType = .camera
            self.present(pickerController, animated: true, completion: nil)
        }
    }

}

extension HomeViewController: UINavigationControllerDelegate, UIImagePickerControllerDelegate, CLImageEditorDelegate {
    // 写真を撮影 or 選択した時に呼ばれるメソッド
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
        if info[.originalImage] != nil {
            // 撮影/選択された画像を取得する
            let image = info[.originalImage] as! UIImage
            // あとでCLImageEditorライブラリで加工する
            print("DEBUG_PRINT: image = \(image)")
            // CLImageEditorにimageを渡して、加工画面を起動する
            guard let editor = CLImageEditor(image: image) else { return }
            editor.delegate = self
            editor.modalPresentationStyle = .fullScreen
            picker.present(editor, animated: true, completion: nil)
        }
    }

    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        // 編集画面から離れる
        self.dismiss(animated: true, completion: nil)
    }

    func imageEditor(_ editor: CLImageEditor!, didFinishEditingWith image: UIImage!) {
        // 編集が終了した時に呼ばれるメソッド(編集した画面を表示する)
        self.imageView.image = image
        self.dismiss(animated: true, completion: nil)
    }

    // CLImageEditorの編集がキャンセルされた時に呼ばれるメソッド
    func imageEditorDidCancel(_ editor: CLImageEditor!) {
        // トップ画面に戻る
        self.dismiss(animated: true, completion: nil)
    }

}

今回はカメラとアルバムを使用するため許可設定用の記述をinfo.plistに追加します。


まとめ

今回は以上です、画像加工ライブラリも有効に使うことでより良いアプリが作れそうですね!


◎今日の格言

ー Benjamin Franklin

Benjamin
Benjamin

Well done is better than well said.

(口だけではなく行動することが何よりも大切である)