post Image
RSKImageCropperの使い方とカスタマイズ

はじめに

こんにちは。
RSKImageCropperという画像トリミングのObjective-C製のライブラリがあり、今回はSNSのプロフィール画像の設定のような実装をSwiftで行いたかったので書いてみました。
至らぬ点など、コメントなど頂けたら幸いです。

導入について

実行環境はSwift3.1/Xcode8.3.3で、CocoaPodsを利用しました。

use_frameworks!

pod 'RSKImageCropper'

サンプルコード

MainViewController.swift
import UIKit
import RSKImageCropper

class MainViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!

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

    @IBAction func buttonAction(_ sender: Any) {
        let image = UIImage(named: "img")!
        let imageCropVC = RSKImageCropViewController(image: image, cropMode: .circle)
        imageCropVC.moveAndScaleLabel.text = "切り取り範囲を選択"
        imageCropVC.cancelButton.setTitle("キャンセル", for: .normal)
        imageCropVC.chooseButton.setTitle("完了", for: .normal)
        imageCropVC.delegate = self
        present(imageCropVC, animated: true)
    }
}

extension MainViewController: RSKImageCropViewControllerDelegate {
    //キャンセルを押した時の処理
    func imageCropViewControllerDidCancelCrop(_ controller: RSKImageCropViewController) {
        dismiss(animated: true, completion: nil)
    }
    //完了を押した後の処理
    func imageCropViewController(_ controller: RSKImageCropViewController, didCropImage croppedImage: UIImage, usingCropRect cropRect: CGRect, rotationAngle: CGFloat) {
        dismiss(animated: true)
        imageView.image = croppedImage
    }
}

ライブラリのクラスについて

切り取り範囲を操作する(RSKImageCropViewController)

以下はRSKImageCropViewControllerのプロパティです。

screen.png

名前 説明
moveAndScaleLabel 上側の説明文になる(UILabel)
cancelButton 左側のキャンセルとなるボタン(UIButton)
chooseButton 右側の選択完了となるボタン(UIButton)

RSKImageCropViewControllerDelegateについて

MainViewController.swift
//キャンセルを押した時の処理
func imageCropViewControllerDidCancelCrop(_ controller: RSKImageCropViewController) {

}
//完了を押した瞬間の処理
func imageCropViewController(_ controller: RSKImageCropViewController, willCropImage originalImage: UIImage) {

}
//完了を押した後の処理
func imageCropViewController(_ controller: RSKImageCropViewController, didCropImage croppedImage: UIImage, usingCropRect cropRect: CGRect) { 

}
//完了を押した後に切り取られた矩形や角度を利用する場合の処理
func imageCropViewController(_ controller: RSKImageCropViewController, didCropImage croppedImage: UIImage, usingCropRect cropRect: CGRect, rotationAngle: CGFloat) {

}

切り取りのモードについて

  • RSKImageCropViewControllerのプロパティのcropModeで指定します。
  • isRotationEnabledで回転するかどうかを指定します。

mode.png

:warning: cropMode = .circleに指定した場合、実際に切り取られる画像は四角形になるようで、

  • ただ画像を表示させたいという場合

    表示させるViewに対してlayer.cornerRadiusを指定して丸くするなどで対応できるかと思います。

  • 画像として円形状のものが欲しい場合

    delegateのusingCropRectcroppedImageなどを利用して自分で作成する必要がある?(更に、rotateした場合は画像が四角形かつ不透明な余白になってしまうため)

none.png AlphaImage.png

//完了を押した後の処理
func imageCropViewController(_ controller: RSKImageCropViewController, didCropImage croppedImage: UIImage, usingCropRect cropRect: CGRect) {
    //もし円形で画像を切り取りし、その画像自体を加工などで利用したい場合
    if controller.cropMode == .circle {
        UIGraphicsBeginImageContext(croppedImage.size)
        let layerView = UIImageView(image: croppedImage)
        layerView.frame.size = croppedImage.size
        layerView.layer.cornerRadius = layerView.frame.size.width * 0.5
        layerView.clipsToBounds = true
        let context = UIGraphicsGetCurrentContext()!
        layerView.layer.render(in: context)
        let capturedImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        let pngData = UIImagePNGRepresentation(capturedImage)!
        //このImageは円形で余白は透過です。
        let png = UIImage(data: pngData)!
    }
}

おわりに

円形での画像の切り取りは、画像が四角形で返されてしまう事や、切り取り範囲が対象の画像よりも大きく切り出した時に、楕円形になってしまい正確には切り出せない事があるため、もし表示するUIが角丸でも四角形での画像切り取りにしてしまったほうが使いやすいのかもしれません。
また、cropModeにはもう一つのモード.customがあり、こちらはRSKImageCropViewControllerを細かく制御できるようなのですが、元画像やズーム率、回転角などを自ら計算する必要があるようで、少し扱いにくいと感じました。ただ、画像切り取りをUIで行えるのはとても良いと思いました。

参考にさせていただいた記事

見て頂いてありがとうございます。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。