Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

こんにちは。
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で行えるのはとても良いと思いました。

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

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

KikurageChan
見て頂いてありがとうございます。
https://kikuragechan.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした