Removing statusbar from screenshot on iOS

Question

Im trying to remove the top part of an image by cropping, but the result is unexpected. The code used:

extension UIImage {
    class func removeStatusbarFromScreenshot(_ screenshot:UIImage) -> UIImage {
        let statusBarHeight = 44.0
        let newHeight = screenshot.size.height - statusBarHeight
        let newSize = CGSize(width: screenshot.size.width, height: newHeight)
        let newOrigin = CGPoint(x: 0, y: statusBarHeight)
        let imageRef:CGImage = screenshot.cgImage!.cropping(to: CGRect(origin: newOrigin, size: newSize))!
        let cropped:UIImage = UIImage(cgImage:imageRef)
        return cropped
    }
}

My logic is that I need to make the image smaller in heigh by 44px and move the origin y by 44px, but it ends up only creating an image much smaller of the top left corner.

The only way that I get it to work as expected is by multiplying the width by 2 and height by 2.5 in newSize, but that also double the size of the image produced.. Which anyways doesnt make much sense.. can someone help make it work without using magic values?

Answer 1

There are two main problems with what you're doing:

• A UIImage has a scale (usually tied to resolution of your device's screen), but a CGImage does not.

• Different devices have different "status bar" heights. In general, what you want to cut off from the top is not the status bar but the safe area . The top of the safe area is where your content starts.

Because of this:

• You are wrong to talk about 44 px. There are no pixels here. Pixels are physical atomic illuminations on your screen. In code, there are points . Points are independent of the scale (and the scale is the multiplier between points and pixels).

• You are wrong to talk about the number 44 itself as if it were hard-coded. You should get the top of the safe area instead.

• By crossing into the CGImage world without taking scale into account, you lose the scale information, because CGImage knows nothing of scale.

• By crossing back into the UIImage world without taking scale into account, you end up with a UIImage with a resolution of 1, which may not be the resolution of the original UIImage.

The simplest solution is not to do any of what you are doing. First, get the height of the safe area; call it h . Then just draw the snapshot image into a graphics image context that is the same scale as your image (which, if you play your cards right, it will be automatically), but is h points shorter than the height of your image — and draw it with its y origin at -h , thus cutting off the safe area. Extract the resulting image and you're all set.

Example. This code comes a view controller, First: I'll take a screenshot of my own device's current screen (this view controller's view) as my app runs:

let renderer = UIGraphicsImageRenderer(size: view.bounds.size)
let screenshot = renderer.image { context in
    view.layer.render(in: context.cgContext)
}

Now, I'll cut the safe area off the top of that screenshot:

let h = view.safeAreaInsets.top
let size = screenshot.size
let r = UIGraphicsImageRenderer(
    size: .init(width: size.width, height: size.height - h)
)
let result = r.image { _ in
    screenshot.draw(at: .init(x: 0, y: -h))
}

Experimentation will confirm that this works perfectly on every device, regardless of whether it has a bezel and regardless of its screen resolution: the top of the resulting image, result , is the top of your actual content.