Cropping CIImage

Question

I have a class that takes an UIImage, initializes a CIImage with it like so:

workingImage = CIImage.init(image: baseImage!)

Then the image is used to cut out 9 neighbouring squares in a 3x3 pattern out of it - in a loop:

for x in 0..<3
    {
        for y in 0..<3
        {

            croppingRect = CGRect(x: CGFloat(Double(x) * sideLength + startPointX),
                                  y: CGFloat(Double(y) * sideLength + startPointY),
                                  width: CGFloat(sideLength),
                                  height: CGFloat(sideLength))
            let tmpImg = (workingImage?.cropping(to: croppingRect))!
        }
    }

Those tmpImgs are inserted into a table and later used, but thats besides the point.

This code works on IOS 9, and on IOS 10 simulators, but not on an actual IOS 10 device. The images produced are either all empty, or one of them is like a half of what its supposed to be, with the rest being, again, empty.

Is this not how its supposed to be done in IOS 10?

Clearly everything depends on having a correct and meaning value for `sideLength` and `startPointX` and `startPointY`. But you have given no clue as to how you are deriving these crucial numbers. (I should also mention that phenomena like "works on simulator but not device" are often caused by threading issues.) — matt, Nov 24 '16 at 18:08
Sorry - one more thing. Why are you passing thru CIImage at all? I'm a little worried that it's because you think this is the way to crop a UIImage — and it isn't. If you have no particular use for a CIImage, i.e. if you are not about to apply a CIFilter, don't use it at all! — matt, Nov 24 '16 at 18:11
This code doesn't crop `workingImage`. The cropped image is assigned to `tmpImg` but immediately released as the variable is never used. So `workingImage` is unchanged. Is this the real code? — Codo, Nov 25 '16 at 09:40
@matt, actually, that indeed is what I think is the way to crop an image. I dont know of any other method, as most things I find on the internet related to cropping either dont work at all, or use CIImage. Id really appreciate if you pointed me the right way. — VID44R, Nov 26 '16 at 15:25
@Codo, `tmpImg` is added into an array of images in the loop, I left that out because I dont think it matters in this case. Like I said, this method _does work correctly_ on `IOS9` devices, which confuses me further. — VID44R, Nov 26 '16 at 15:30
@VID44R Okay, I've shown you how to do it correctly (and reliably). — matt, Nov 26 '16 at 16:29

matt · Accepted Answer · 2016-11-26T16:28:48.577

The heart of the matter is that passing through CIImage is not the way to crop a UIImage. For one thing, coming back from CIImage to UIImage is a complicated business. For another, the whole round-trip is unnecessary.

How To Crop

To crop an image, make an image graphics context of the desired cropped size and call draw(at:) on the UIImage to draw it at the desired point relative to the graphics context, so that the desired portion of the image falls into the context. Now extract the resulting new image and close the context.

To demonstrate, I'll crop to one of the thirds you are trying to crop to, namely the lower right third:

let sz = baseImage.size
UIGraphicsBeginImageContextWithOptions(
    CGSize(width:sz.width/3.0, height:sz.height/3.0), 
    false, 0)
baseImage.draw(at:CGPoint(x: -sz.width/3.0*2.0, y: -sz.height/3.0*2.0))
let tmpImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Original image (baseImage):

Cropped image (tmpImg):

The other sections are completely parallel.

score 1 · Answer 2 · answered Jun 17 '19 at 03:28

Core Image's coordinate system mismatches with UIKit, so the rect needs to be mirrored.

So in your specific case, you want:

var ciRect = croppingRect
ciRect.origin.y = workingImage!.extent.height - ciRect.origin.y - ciRect.height
let tmpImg = workingImage!.cropped(to: ciRect)

This definitely works for iOS 10+.

In a more general case, we would make a UIImage extension that covers both possible coordinate systems, and that's way faster than draw(at:):

extension UIImage {
    /// Return a new image cropped to a rectangle.
    /// - parameter rect:
    /// The rectangle to crop.
    open func cropped(to rect: CGRect) -> UIImage {
        // a UIImage is either initialized using a CGImage, a CIImage, or nothing
        if let cgImage = self.cgImage {
            // CGImage.cropping(to:) is magnitudes faster than UIImage.draw(at:)
            if let cgCroppedImage = cgImage.cropping(to: rect) {
                return UIImage(cgImage: cgCroppedImage)
            } else {
                return UIImage()
            }
        }
        if let ciImage = self.ciImage {
            // Core Image's coordinate system mismatch with UIKit, so rect needs to be mirrored.
            var ciRect = rect
            ciRect.origin.y = ciImage.extent.height - ciRect.origin.y - ciRect.height
            let ciCroppedImage = ciImage.cropped(to: ciRect)
            return UIImage(ciImage: ciCroppedImage)
        }
        return self
    }
}

I've made a pod for it, so the source code is at https://github.com/Coeur/ImageEffects/blob/master/SwiftImageEffects/ImageEffects%2Bextensions.swift

Cropping CIImage

2 Answers2

How To Crop

Linked