【Swift】画像をトリミングできるライブラリを使ってみた

画像を切り抜きたいということがあったので調べてみるとTOCropViewControllerというイメージをトリミングするのに便利そうなライブラリがあったので使ってみることにしました。

TOCropViewController

Tim OliverさんのCropViewControllerです。ライブラリのイニシャルに自分の名前入っているのでかっこいいですね。

こんな感じで簡単に画像を切り取る機能を実装することが出来ます。

特徴

https://github.com/TimOliver/TOCropViewControllerのFeaturesから引用したものですが、このような機能を持っています。

• グリッドオーバーレイの端をドラッグして画像を切り抜きます
• 必要に応じて、画像の円形コピーを切り抜きます
• 画像を90度のセグメントで回転させます
• クロップボックスを特定のアスペクト比に固定します
• すべての変更を完全に元に戻すためのリセットボタンがあります
• iOS 7/8の半透明性により、トリミングされた領域が見やすくなります
• コントローラにトリミングされた画像をデリゲートに返すか、すぐにUIActivityViewControllerに渡すかを選択します
• デバイスを横向きモードに回転させたときのカスタムアニメーションとレイアウトを行えます
• 開始時および画面破棄時のアニメーションをカスタム出来ます
• 28の言語にローカライズされています

実装していきましょう。

開発環境

• Xcode 13
• Swift 5.5

インストール

• CocoaPods
• Swift Package Manager
• Carthage
• 手動インストール

インストール方法

Swift Package Managerでのインストールに対応していたので今回はこちらでインストールすることにしました。

Xcodeプロジェクト内で、

File > Add package... > 検索フォームにhttps://github.com/TimOliver/TOCropViewController.gitを入れて検索するとライブラリが出てくるので選択してAdd packageをクリックします。

呼び出し

CropViewControllerをインポート。

import CropViewController

あとは、CropViewControllerを生成し、デリゲート設定して表示するだけです。

let cropViewController = CropViewController(croppingStyle: .default, image: image)
cropViewController.delegate = self
present(cropViewController, animated: true)

• 第一引数はTOCropViewCroppingStyleの列挙型で切り抜きするスタイルを選択でき、defaultとcircularがあります。
• 第二引数は切り抜きたい画像を渡します

default	circular

croppingStyleをcircularにすると、文字通り円形の切り抜きが行えるようになります。

Delegateメソッド

didCropImageToRect

ユーザーが切り抜きアクションを押した時に呼び出され、長方形をトリミングするだけです。

func cropViewController(_ cropViewController: CropViewController, didCropImageToRect rect: CGRect, angle: Int)

didCropToImage

ユーザーが切り抜きアクションを押した時に呼び出され、トリミング座標と切り抜きされたイメージを取得出来ます。

func cropViewController(_ cropViewController: CropViewController, didCropToImage image: UIImage, withRect cropRect: CGRect, angle: Int)

didCropToCircularImage

トリミングスタイルが円形に設定されている場合、このデリゲートを実装すると、切り抜きされたイメージ、およびトリミング座標を取得出来ます。

func cropViewController(_ cropViewController: CropViewController, didCropToCircularImage image: UIImage, withRect cropRect: CGRect, angle: Int)

didFinishCancelled

ユーザーがキャンセルを押すと呼ばれます。

func cropViewController(_ cropViewController: CropViewController, didFinishCancelled cancelled: Bool)

カスタマイズ

cropViewControllerのプロパティを設定すると画面をカスタマイズすることも出来ます。

let cropViewController = CropViewController(croppingStyle: .default, image: image)
cropViewController.delegate = self

// アスペクト比を何でプリセットするか
cropViewController.aspectRatioPreset = .preset4x3

// アスペクト比選択ボタンを非表示にするか
cropViewController.aspectRatioPickerButtonHidden = true

// リセットボタンを非表示にするか
cropViewController.resetButtonHidden = true

// キャンセルボタンを非表示にするか
cropViewController.cancelButtonHidden = true

// 回転ボタンを非表示にするか
cropViewController.rotateButtonsHidden = true

// Doneボタンを非表示にするか
cropViewController.doneButtonHidden = false

present(cropViewController, animated: true)

今回は初期表示にアスペクト比を4x3でプリセットして、Doneボタン以外を非表示にしてみました。

その他セットできるプロパティもあるので気になる方は見てみてください。

おわりに

こちらのOSSの最終コミット履歴が、2021年11月25日コミット（2021年12月14日時点）になっており、コミッターの方や開発者の方が日々改良やメンテナンスをしてくれていることが分かりました。

アプリもそうですが、ライブラリなども同じで沢山の開発者のおかげで便利な世の中になっているんだと再認識いたしました。

開発者への感謝の気持ちを忘れないようにしたいですね。