Swift カメラロールの画像を９８％の大きさでクロップする

Question

###前提・実現したいこと
画像ピッカーで選んだ画像をUIImageViewに表示しているのですが、その画像の縁を切るように、98%カットしたいのです。
こんな感じです。

Aspect Fitです。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        if let image = info[UIImagePickerControllerOriginalImage] as? UIImage {
            imageView.image = image
        } else {
            print("Error")
        }
        self.dismiss(animated: true, completion: nil)
    }
@IBAction func tappedCropButton(_ sender: Any) {
        //どうするのでしょうか
    }

###試したこと
imageViewを中心に表示したいので、以下のようにしてみたのですが、

var imageViewWidth = 325
var imageViewHeight = 474
//省略
@IBAction func tappedCropButton(_ sender: Any) {
    let imageWidthCropped = Int(Double(imageViewWidth) * 0.98)
    let imageHeightCropped = Int(Double(imageViewHeight) * 0.98)
    let imageViewXCropped = (1024 - imageWidthCropped) / 2
    let imageViewYCropped = (768 - imageHeightCropped) / 2
    //iPadランドスケープの想定なので、全体widthを1024,heightを768にしてます。
    imageView.frame = CGRect(x: imageViewXCropped, y: imageViewYCropped, width: imageWidthCropped, height: imageHeightCropped)
    imageViewWidth = imageWidthCropped
    imageViewHeight = imageHeightCropped
    //98%カットした画像をさらに98%カットしたいので、基準となる値を更新します
    }

しかし、これだと全く想定していない動きになってしまっていたため、
以下のextentionを利用して、

extension UIImage {
    func cropping(to: CGRect) -> UIImage? {
        var opaque = false
        if let cgImage = cgImage {
            switch cgImage.alphaInfo {
            case .noneSkipLast, .noneSkipFirst:
                opaque = true
            default:
                break
            }
        }
        
        UIGraphicsBeginImageContextWithOptions(to.size, opaque, scale)
        draw(at: CGPoint(x: -to.origin.x, y: -to.origin.y))
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

こうしてみました。

var imageViewWidth = 325
var imageViewHeight = 474
//省略
@IBAction func tappedCropButton(_ sender: Any) {
    let imageWidthCropped = Int(Double(imageViewWidth) * 0.98)
    let imageHeightCropped = Int(Double(imageViewHeight) * 0.98)
    let imageXCropped = (imageViewWidth - imageWidthCropped) / 2
    let imageYCropped = (imageViewHeight - imageHeightCropped) / 2
    //周囲２％を削りたいので、小さくなった分を上下左右に２等分するため、/2をします。
    let imageViewXCropped = (1024 - imageWidthCropped) / 2
    let imageViewYCropped = (768 - imageHeightCropped) / 2
    let croppedImage = imageView.image!.cropping(to: CGRect(x: imageXCropped, y: imageYCropped, width: imageWidthCropped, height: imageHeightCropped))
    imageView.Image = croppedImage
    imageView.frame = CGRect(x: imageViewXCropped, y: imageViewYCropped, width: imageWidthCropped, height: imageHeightCropped)
    imageViewWidth = imageWidthCropped
    imageViewHeight = imageHeightCropped
    //98%カットした画像をさらに98%カットしたいので、基準となる値を更新します
    }

ですが、やはり想定とは異なる動きになってしまい、具体的に言うと、元の画像の原寸からクロップされたり、imageViewがだんだん上に移動してしまったりしまいます。

###補足情報(言語/FW/ツール等のバージョンなど)
xcode3 swift8

Comments

[fuzzball]

画像のサイズは325x474ではないということでしょうか？

[mitci]

画像のサイズは、325x474では全くないんです・・・。大きさは様々で、Aspect Fitして、余白をつけています。

[t_obara]

元画像を縮小してからcropしたいのでしょうか？元画像をcropしてから表示領域に合わせたいのでしょうか？コードをきちんと追っていませんが、cropと表示領域に合わせる部分を同時に実現するのではなく、一つずつ実装して確認されてはいかがでしょうか？

[mitci]

用途としては、元画像の大小によらず、325x474にaspect fitで入れて、９８％ずつ画像をクロップしていき（サイズはクロップするごとに325x474の９８％、その９８％、そのまた９８％・・・としたいのです）、最終的には新たな画像としてカメラロールに保存したいな、と思っています。

[t_obara]

aspect fitで入れるというのは単に表示の際に縮小されるだけです。まずは325x474にaspect fitと同様に形で縮小し、その後に98%縮小してみてはいかがですか？

[fuzzball]

私もt_obaraさんと同意見です。繰り返し行うなら実際にリサイズした方が良いと思います。

Answer 1

目的を果たせるかどうか分かりませんが、クロップするサイズのViewを用意して、その上にImageViewを乗せるのはどうでしょうか？

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
        
    v = UIView(frame: CGRect(x: 0, y: 0, width: imageWidthCropped, height: imageHeightCropped))
    v.center = self.view.center
    v.clipsToBounds = true
    self.view.addSubview(v)
    
    imageView.frame = CGRect(x: 0, y: 0, width: imageViewWidth, height: imageViewHeight)
    imageView.center = CGPoint(x: v.frame.width/2, y:v.frame.height/2)
    v.addSubview(imageView)
}