Flip image vertically (Swift)

Question

How to flip an UIImage vertically (up/down)? This is a question that is asked before...

• Flip UIImage Along Either Axis
• How to flip UIImage horizontally?
• How to flip UIImage horizontally with Swift?

I am showing an image in a image view and it is possible to draw in the image. For the erase function I use an UIBezierpath in a CAShapeLayer. The strokeColor of the CAShapeLayer is UIColor(patternImage: background).cgColor, where background is the same image as the image in the image view. The background turned out to be upside down. From other Stackoverflow posts I understand that this is caused because UIKit and Core Graphics use another origin for their coordinates system.

I tried some of the solutions in the Stackoverflow posts to flip my background image. None of these where working:

UIImage* sourceImage = [UIImage imageNamed:@"whatever.png"];
UIImage* flippedImage = [UIImage imageWithCGImage:sourceImage.CGImage 
                                            scale:sourceImage.scale
                                      orientation:UIImageOrientationUpMirrored];

---

let ciimage: CIImage = CIImage(CGImage: imagenInicial.CGImage!)
let rotada3 = ciimage.imageByApplyingTransform(CGAffineTransformMakeScale(1, -1))

---

func flipImageVertically() -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    let bitmap = UIGraphicsGetCurrentContext()!

    bitmap.translateBy(x: size.width / 2, y: size.height / 2)
    bitmap.scaleBy(x: 1.0, y: -1.0)

    bitmap.translateBy(x: -size.width / 2, y: -size.height / 2)
    bitmap.draw(self.cgImage!, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}

---

I started experimenting with the last solution by changing the scale and just watching the result. It turned out that my solution was that I needed to use

bitmap.scaleBy(x: 1.0, y: 1.0)

in the function flipImageVertically() to create a new upside down image.

I don't understand this. By scaling with 1 I thought I was not changing anything. I don't know if the imageOrientation of my original image is important. But the imageOrientation is .up.

I hope someone can explain why I can flip an image vertically with the function

func flipImageVertically() -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(size, false, scale)
    let bitmap = UIGraphicsGetCurrentContext()!

    bitmap.translateBy(x: size.width / 2, y: size.height / 2)
    bitmap.scaleBy(x: 1.0, y: 1.0)

    bitmap.translateBy(x: -size.width / 2, y: -size.height / 2)
    bitmap.draw(self.cgImage!, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}

Answer 1

Changing the following line worked for me: context.scaleBy(x: 1.0, y: -1.0)

extension UIImage {
public func flipVertically() -> UIImage? {
            UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
            let context = UIGraphicsGetCurrentContext()!
            
            context.translateBy(x: self.size.width/2, y: self.size.height/2)
            context.scaleBy(x: 1.0, y: -1.0)
            context.translateBy(x: -self.size.width/2, y: -self.size.height/2)
            
            self.draw(in: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height))
            
            let newImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            
            return newImage
        }
}