【iOS】图片采集的方向问题
刚开始使用AVFoundation进行采集的时候,经常会发现采集回来的图片方向不对。一般我们都是垂直(HOME键在底部)操作手机,但是在手机用相册或者在电脑上点开采集的图片时,都会发现图片逆时针旋转了90度。为了发现问题的所在,我们需要了解一下通常在图片采集中我们会遇到的各种方向。
图片方向 UIImageOrientation
日常开发中,UIImage
是一个使用频率很高的类,但是一般我们并不太在意他的方向问题。我们可以通过imageOrientation
属性获取UIImage
的图片方向,即UIImageOrientation
。该方向总共有八种情况,用于表示当前图片的方向状态:
UIImageOrientationUp
: 方向正确UIImageOrientationDown
: 旋转180度UIImageOrientationLeft
: 逆时针旋转90度UIImageOrientationRight
: 顺时针旋转90度UIImageOrientationUpMirrored
: 水平镜像UIImageOrientationDownMirrored
: 旋转180度 + 水平镜像UIImageOrientationLeftMirrored
: 逆时针旋转90度 + 垂直镜像UIImageOrientationRightMirrored
: 顺时针旋转90度 + 垂直镜像
在平时我们并没有发现UIImage
的显示方向有问题,是因为它在显示的时候会根据当前图片的imageOrientation
属性,进行相应的转换,即逆操作。如果值是UIImageOrientationLeft
则表示图片在显示的时候,需要顺时针旋转90度。
简单来说,
UIImageOrientation
就是告诉我们该图像的方向属于什么状态,在显示时候是需要做一个逆操作来让图像真正变成我们想要的方向。
回到文章一开始的问题,图片逆时针旋转了90度是因为当前的图像的像素点数据是真的逆时针旋转了90度。虽然整个图片中是有图片方向这个属性的,但是在用文件显示图片的过程中,系统并不会根据该属性进行逆操作,而是耿直的直接显示了。
视频方向 AVCaptureVideoOrientation
在进行媒体的采集中,无论是进行拍照和录像,都会有一个相似的操作,即设置连接的videoOrientation
属性。系统是不知道你视频图片的正确方向的,只能通过videoOrientation
的值来进行图片方向的设置。视频方向一共有四个,这里使用Home键的位置进行解释:
AVCaptureVideoOrientationPortrait
: HOME键在底部AVCaptureVideoOrientationPortraitUpsideDown
: HOME键在顶部AVCaptureVideoOrientationLandscapeRight
: HOME键在右边AVCaptureVideoOrientationLandscapeLeft
: HOME键在左边
简单来说,
AVCaptureVideoOrientation
是不会真正的修改图片像素点的位置,只是给图片设置一个合适的方向(参照当前视频的正确方向)属性。
罪魁祸首
在了解了UIImageOrientation
和AVCaptureVideoOrientation
后,我们就来解答开篇问题,找出引发这个问题的“罪魁祸首”。
下面的讲解中,我简单把图片看成是两个部分组成:
- 图片数据
- 图片方向
在图片采集的时候,图片数据是按照相机获取的数据。平时我们都是都认HOME键在下方是正确的方向,但是对于相机,他正确的方向是摄像头在用户的左上方的情况,即HOME键在右边的情况:
因此在videoOrientation
为AVCaptureVideoOrientationPortrait
的情况下,图片数据效果就是右侧的图片。虽然他的图片方向是UIImageOrientationLeft
,但是一般的文件显示都是直接显示他原来的面貌。因此,用户看到的和我们最终保存的图片颠倒“罪魁祸首”就是相机的原始方向与我们的预期不符合。
解决方法
图片本身是没错的,错的是显示的时候没有没有按图片方向进行逆操作。那么,我们只要在每次采集到图片的时候对图片进行一次逆操作,让图片数据直接变成与“图片数据+图片方向”的效果即可:
- (UIImage *)fixOrientation
{
// No-op if the orientation is already correct
if (self.imageOrientation == UIImageOrientationUp) return self;
// We need to calculate the proper transformation to make the image upright.
// We do it in 2 steps: Rotate if Left/Right/Down, and then flip if Mirrored.
CGAffineTransform transform = CGAffineTransformIdentity;
switch (self.imageOrientation) {
case UIImageOrientationDown:
case UIImageOrientationDownMirrored:
transform = CGAffineTransformTranslate(transform, self.size.width, self.size.height);
transform = CGAffineTransformRotate(transform, M_PI);
break;
case UIImageOrientationLeft:
case UIImageOrientationLeftMirrored:
transform = CGAffineTransformTranslate(transform, self.size.width, 0);
transform = CGAffineTransformRotate(transform, M_PI_2);
break;
case UIImageOrientationRight:
case UIImageOrientationRightMirrored:
transform = CGAffineTransformTranslate(transform, 0, self.size.height);
transform = CGAffineTransformRotate(transform, -M_PI_2);
break;
case UIImageOrientationUp:
case UIImageOrientationUpMirrored:
break;
}
switch (self.imageOrientation) {
case UIImageOrientationUpMirrored:
case UIImageOrientationDownMirrored:
transform = CGAffineTransformTranslate(transform, self.size.width, 0);
transform = CGAffineTransformScale(transform, -1, 1);
break;
case UIImageOrientationLeftMirrored:
case UIImageOrientationRightMirrored:
transform = CGAffineTransformTranslate(transform, self.size.height, 0);
transform = CGAffineTransformScale(transform, -1, 1);
break;
case UIImageOrientationUp:
case UIImageOrientationDown:
case UIImageOrientationLeft:
case UIImageOrientationRight:
break;
}
// Now we draw the underlying CGImage into a new context, applying the transform
// calculated above.
CGContextRef ctx = CGBitmapContextCreate(NULL, self.size.width, self.size.height,
CGImageGetBitsPerComponent(self.CGImage), 0,
CGImageGetColorSpace(self.CGImage),
CGImageGetBitmapInfo(self.CGImage));
CGContextConcatCTM(ctx, transform);
switch (self.imageOrientation) {
case UIImageOrientationLeft:
case UIImageOrientationLeftMirrored:
case UIImageOrientationRight:
case UIImageOrientationRightMirrored:
// Grr...
CGContextDrawImage(ctx, CGRectMake(0,0,self