iOS development Swift realizes the horizontal flip (mirror) of the picture (UIImage) and flips vertically

Sometimes we need to flip the picture (uiimage) vertically (upside down) or flip it horizontally (that is, mirroring). The following figure:

There are usually two ways.

Method One, changing the direction of the picture

1, the principle of realization

UIImage has a property called Imageorientation, which is an enumeration variable. The main role is to control the direction of image rendering, there are 8 different directions:

Enum Uiimageorientation:int {
Case up//0: Default Direction
Case down//1:180° rotation
Case Left//2: Counterclockwise rotation 90°
Case Right//3: Rotate 90° Clockwise
Case upmirrored//4: Flip horizontally
Case Downmirrored//5: Flip Horizontally
Case leftmirrored//6: Flip vertically
Case Rightmirrored//7: Flip vertically
}
So we just need to change uiimage's orientation so that when the picture is displayed, the picture container will be displayed according to the new orientation property. To achieve a horizontal flip or flip vertically.

2, horizontal flip (that is, left and right mirror)

Original picture
Let Srcimage = UIImage (named: "Hangge.png")!

Flip the direction of a picture
Let Flipimageorientation = (srcImage.imageOrientation.rawValue + 4)% 8
Flip a picture
Let Flipimage = UIImage (cgimage:srcimage.cgimage!,
Scale:srcImage.scale,
Orientation:uiimageorientation (rawvalue:flipimageorientation)!
)

Picture Display
Imageview.image = Flipimage

3, flip vertically

Original picture
Let Srcimage = UIImage (named: "Hangge.png")!

Flip the direction of a picture
var flipimageorientation = (srcImage.imageOrientation.rawValue + 4)% 8
Flipimageorientation + = flipimageorientation%2==0? 1:-1
Flip a picture
Let Flipimage = UIImage (cgimage:srcimage.cgimage!,
Scale:srcImage.scale,
Orientation:uiimageorientation (rawvalue:flipimageorientation)!
)

Picture Display
Imageview.image = Flipimage

method Two, through the quartz redraw the picture, changes the original picture data

1, the principle of realization

Method 1 is flipped by changing the uiimage orientation, which means it just changes a tag.
Its internal picture data is actually raw data, if the rollover image is not used for display, but need to use for image recognition, image processing and other operations that the above method is not suitable.
The method is to rearrange the uiimage image raw data array to achieve flip. The key point of its implementation is to redraw the picture at the core Graphics (Quartz) level.

2, horizontal flip (that is, left and right mirror)

Because the core Graphics (Quartz) and Uikit's y-axis coordinate system is opposite, first rotates around the origin 180 degrees, then the translation is good

Original picture
Let Srcimage = UIImage (named: "Hangge.png")!

Quartz Redraw a picture
Let rect = CGRectMake (0, 0, srcImage.size.width, srcImage.size.height);//Create Rectangular box
Create a bitmap based graphics context based on size
Uigraphicsbeginimagecontextwithoptions (Rect.size, False, 2)
Let CurrentContext = Uigraphicsgetcurrentcontext ()//Get current Quartz 2d drawing environment
Cgcontextcliptorect (CurrentContext, rect);//Set the current drawing environment to a rectangular box
CGCONTEXTROTATECTM (CurrentContext, CGFloat (M_PI)); Rotate 180 degrees
Translation, here is the translation coordinate system, with the translation of graphics is a reason
CGCONTEXTTRANSLATECTM (CurrentContext,-rect.size.width,-rect.size.height);
Cgcontextdrawimage (CurrentContext, rect, srcimage.cgimage);//Drawing

Flip a picture
Let DrawImage = Uigraphicsgetimagefromcurrentimagecontext ();//Get Picture
Let Flipimage = UIImage (cgimage:drawimage.cgimage!,
Scale:srcImage.scale,
Orientation:srcImage.imageOrientation//Picture direction not to change
)

Picture Display
Imageview.image = Flipimage

3, flip vertically

It's simpler to flip vertically. Because the Core Graphics (Quartz) is the opposite of the y-axis coordinate system of Uikit, Uikit is the Y axis downward and the Quartz is the y-axis upward. Direct rendering is a vertical flip.

//Original picture
Let Srcimage = UIImage (named: "Hangge.png")!
 
//quartz redrawing picture
Let rect =  Cgrectmak E (0, 0, srcImage.size.width, srcImage.size.height);//Create a rectangular box
//Create a bitmap based graphics context based on size
Uigraphicsbeginimagecontextwithoptions (Rect.size, False, 2)
Let CurrentContext =  Uigraphicsgetcurrentcontext ()//Get current Quartz 2d drawing environment
Cgcontextcliptorect (CurrentContext, rect);//Set current drawing environment to rectangular box
Cgcontextdrawimage (CurrentContext, rect, srcimage.cgimage);//Drawing
 
//Rollover picture
Let DrawImage =  Uigraphicsgetimagefromcurrentimagecontext ()//Get Picture
Let Flipimage =  uiimage (cgimage:drawimage.cgimage!,
    Scale:srcImage.scale,
    orientation:srcimage.imageorientation // Picture direction not to change
)
 
//Picture display
Imageview.image = flipimage

Note: How to prevent blurry display due to picture redraw
Because of the use of the retina screen, my original picture is hangge@2x.png. If you use the second method, you can flip the picture and display it by redrawing it. Then you need to set a magnification when creating a graphics context. Rather than simply Uigraphicsbeginimagecontext (rect.size) directly to create.

Create a bitmap based graphics context based on size
Uigraphicsbeginimagecontextwithoptions (Rect.size, False, 2)