前言
曾经做过一个图片编辑软件,对图片进行添加贴纸
滤镜
等功能,其中遇到一个问题,因为对图片质量要求较高,需要对原图
进行编辑处理,而不能使用截屏,对原图
处理就涉及到图片方向
的概念。在这里对UIImage
的方向做一个总结。
图片格式
主流图片有两种格式PNG
以及JPG(JPEG)
PNG
因为Apple
会对PNG
图片进行优化(通过pngcrush
),所以资源文件使用PNG
格式进行存储。PNG
图片无方向性,通过MetaData
可以看到。
JPG
JPG
图片是有损压缩的,主要用于网络传输。iOS
设备相册存储的图片也是此种格式。
JPG
图片是有方向的,
JPG
方向介绍
由上图可知,
JPG
图片的方向是指展示出来的图像相对于的原图
的变换。举个例子:方向6,注释是
逆时针旋转90度
,也就是目前看到的图像是原图
逆时针旋转90度
之后的图形。原图
的意思就是存储在硬盘上
iOS
设备方向
在研究图片方向前,先要了解设备方向
typedef NS_ENUM(NSInteger, UIDeviceOrientation) {
UIDeviceOrientationUnknown,
UIDeviceOrientationPortrait, // Device oriented vertically, home button on the bottom
UIDeviceOrientationPortraitUpsideDown, // Device oriented vertically, home button on the top
UIDeviceOrientationLandscapeLeft, // Device oriented horizontally, home button on the right
UIDeviceOrientationLandscapeRight, // Device oriented horizontally, home button on the left
UIDeviceOrientationFaceUp, // Device oriented flat, face up
UIDeviceOrientationFaceDown // Device oriented flat, face down
}
具体对应就是
方向 | 方向值 | 描述 |
---|---|---|
UIDeviceOrientationPortrait | 6 | 逆时针旋转90度 |
UIDeviceOrientationPortraitUpsideDown | 8 | 顺时针旋转90度 |
UIDeviceOrientationLandscapeLeft | 1 | 方向正常 |
UIDeviceOrientationLandscapeRight | 3 | 旋转180度 |
以下是使用
方向 | 方向值 | 描述 |
---|---|---|
UIDeviceOrientationPortrait | 6 | 逆时针旋转90度 |
UIDeviceOrientationPortraitUpsideDown | 8 | 顺时针旋转90度 |
UIDeviceOrientationLandscapeLeft | 1 | 方向正常 |
UIDeviceOrientationLandscapeRight | 3 | 旋转180度 |
除了这些方向还有其他方向,当然这些方向是flip
不是直接拍出来的。
具体表如下:
EXIF Orientation Value | Row 0 is | Column 0 is |
---|---|---|
1 | Top | Left side |
2 * | Top | Right side |
3 | Bottom | Right side |
4 * | Bottom | Left side |
5 * | Left side | Top |
6 | Right side | Top |
7 * | Right side | Bottom |
8 | Left side | Bottom |
NOTE: Values with "*" are uncommon since they represent "flipped" orientations.
UIImage
方向
UIImage
官方说明
UIImageOrientationUp
The default orientation of images. The image is drawn right-side up, as shown here.
UIImageOrientationDown
The image is rotated 180 degrees, as shown here.
UIImageOrientationLeft
The image is rotated 90 degrees clockwise, as shown here.
UIImageOrientationRight
The image is rotated 90 degrees counterclockwise, as shown here.
UIImageOrientationUpMirrored
The image is drawn as a mirror version of an image drawn with the UIImageOrientationUp value. In other words, the image is flipped along its horizontal axis, as shown here.
UIImageOrientationDownMirrored
The image is drawn as a mirror version of an image drawn with the UIImageOrientationDown value. This is the equivalent to flipping an image in the “up” orientation along its horizontal axis and then rotating the image 180 degrees, as shown here.
UIImageOrientationLeftMirrored
The image is drawn as a mirror version of an image drawn with the UIImageOrientationLeft value. This is the equivalent to flipping an image in the “up” orientation along its horizontal axis and then rotating the image 90 degrees counterclockwise, as shown here.
UIImageOrientationRightMirrored
The image is drawn as a mirror version of an image drawn with the UIImageOrientationRight value. This is the equivalent to flipping an image in the “up” orientation along its horizontal axis and then rotating the image 90 degrees clockwise, as shown here.
举例
UIImage
的方向跟JPG
图片方向是一致的,也就是说UIImageOrientationUp
是图片的原始方向,使用UIImageView
看到的图像是经过原始图像
转换之后的结果。
例如:一张图片的方向是UIImageOrientationLeft
,使用UIImageView
展示,就是使用原始图像
经过顺时针旋转90度之后的结果。
使用UIDeviceOrientationPortrait
拍照一张,预览图
而后打断点
查看原图
图片方向UIImageOrientationLeft
,很明显预览图
是原图
经过顺时针旋转90度而来。
总结
- UIImageView如果发现image的imageOrientation不为UIImageOrientationUp时,imageView会根据imageOrientation调整显示内容。
因此,我们把如果image的imageOrientation调整为UIImageOrientationUp就可以看到image的原始图。 - 也可以通过内存地址查看原始图。
- UIImage是CGImage的上层表现,CGImage真正存储了UIImage的数据。
- 图片的宽高是按照展示的图片算的,不是原图的宽高。
- 为了精确展示图片旋转的过程使用
UIViewContentModeScaleAspectFit
参数来展示图片。
Demo
说明
拍照查看图片方向
查看预览图
原图
以及修正图
和 旋转过程
Demo
地址
git
地址TSImageOrientation