以前遇到过iOS调用相机拍照图片旋转了90度的问题,照片显示在UIImageView里面是正常的,但是传输到服务器之后发现不是正的。

要解决上面这个问题,在发送图片到服务器之前,要对图片方向进行纠正。一般有两种方法进行纠正。

方法一、使用CGAffineTransform + CGBitmapContextCreateImage

UIImage+fixOrientation.h文件

// UIImage+fixOrientation.h文件
#import <UIKit/UIKit.h>

@interface UIImage (fixOrientation)

- (UIImage *)fixOrientation;

@end

UIImage+fixOrientation.m 文件

// UIImage+fixOrientation.m 文件
@implementation UIImage (fixOrientation)

- (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;
    }
    
    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;
    }
    
    // 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.size.height,self.size.width), self.CGImage);
            break;
            
        default:
            CGContextDrawImage(ctx, CGRectMake(0,0,self.size.width,self.size.height), self.CGImage);
            break;
    }
    
    // And now we just create a new UIImage from the drawing context
    CGImageRef cgimg = CGBitmapContextCreateImage(ctx);
    UIImage *img = [UIImage imageWithCGImage:cgimg];
    CGContextRelease(ctx);
    CGImageRelease(cgimg);
    return img;
}

@end

方法二、利用UIKit的drawInRect

// 假如说image是调用相机拍照取得的图片

// 下面对图片进行方向调整
UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

drawInRect在绘制的时候已经考虑到了方向问题。

-drawInRect:
Draws the entire image in the specified rectangle, scaling it as needed to fit.

Discussion
This method draws the entire image in the current graphics context, respecting the image’s orientation setting. In the default coordinate system, images are situated down and to the right of the origin of the specified rectangle. This method respects any transforms applied to the current graphics context, however.


如果是使用Quartz绘图,可能会涉及坐标问题。比如说如下代码,画出的图就是上下颠倒的

- (void)drawRect:(CGRect)rect {
    UIImage * img = [UIImage imageNamed:@"testtransform.jpg"];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextDrawImage(context, CGRectMake(30, 10, 240, 80), img.CGImage);
}

比如说下面两张图,一张是原图。右边通过上述代码,把这种图片绘制在界面上某个View里面时候的样子

原图

绘制后的图片

因为用户空间设备空间的坐标方向是不同的。

用户空间的坐标原点在左下角,X轴正方向向右,Y轴正方向向上。设备空间的坐标原点在左上角,X轴正方向向右,Y轴正方向向上。

quartz坐标

uikit坐标

由于UIKit的相当于是对Quartz的封装,调用UIKit的绘图API,UIKit会自动进行用户空间坐标系统设备空间坐标系统的转换。但是直接调用Quartz的API,需要特别注意变换问题。

Quartz将用户空间坐标系统映射到设备空间坐标系统,这个映射关系的变换矩阵称为CTM(current transformation matrix)。

如果要让上面的图变正,可以使用变换函数来修改CTM或者将仿射变换应用到CTM上,看下面两个示例:

示例1:变换函数来修改CTM

将上方的代码变成如下这样:

- (void)drawRect:(CGRect)rect {
    UIImage * img = [UIImage imageNamed:@"testtransform.jpg"];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect rectImage = CGRectMake(30, 10, 240, 80);
    CGContextTranslateCTM(context, rectImage.origin.x, rectImage.origin.y);
    CGContextTranslateCTM(context, 0, rectImage.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, -rectImage.origin.x, -rectImage.origin.y);
    CGContextDrawImage(context, rectImage, img.CGImage);
}

示例2:CGContextConcatCTM将仿射变换应用到CTM上

将上方的代码变成如下这样:

- (void)drawRect:(CGRect)rect {
    UIImage * img = [UIImage imageNamed:@"testtransform.jpg"];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGRect rectImage = CGRectMake(30, 10, 240, 80);
    CGAffineTransform transfrom = CGAffineTransformMakeTranslation(rectImage.origin.x, rectImage.origin.y);
    transfrom = CGAffineTransformTranslate(transfrom, 0, rectImage.size.height);
    transfrom = CGAffineTransformScale(transfrom, 1.0, -1.0);
    transfrom = CGAffineTransformTranslate(transfrom, -rectImage.origin.x, -rectImage.origin.y);
    CGContextConcatCTM(context, transfrom);
    CGContextDrawImage(context, rectImage, img.CGImage);
}