iPhone拍照上传后发生旋转的问题

2017-04-13  本文已影响831人  Code_Ninja

我们的APP上传图片一直是客户端直接连接FTP服务器,将图片上传到服务器,然后将图片地址传给后台接口,后台拿到大图之后再去做一份缩略图。之前偶尔发现上传的图片在APP中显示缩略图的时候会出现图片旋转的效果,一直没太在意。今天才意识到问题的严重性,当上传照片的时候选择拍照,特别是当手机和水平面平行的时候拍照上传之后发现缩略图是旋转了的。

这个问题很奇怪,只有iPhone拍照上传会出现这种问题,安卓的没有。一开始我们还以为是后台在生成缩略图的时候旋转了。后来到FTP服务器上查看原图的时候发现上传的大图就是旋转了的。但是在Mac的预览、浏览器以及APP中的UIImageView显示大图的时候都是正常的啊。无疑的是Mac的预览和浏览器在显示图片的时候都自动判断了图片的旋转信息然后进行了自适应,让我们看到的效果是没有发生旋转。实际上,用预览打开图片后,选择工具->显示检查器或者command+i就会出来一个小窗口,这里会看到图片的方向信息(此处为:方向:6(逆时针旋转90°))。

发现是EXIF(Exchangeable Image File Format 可交换图像文件格式,是专门为数码相机的照片设定的,可以记录数码照片的属性信息和拍摄数据… Exif可以附加于JPEG、TIFF、RIFF等文件之中)这么个东西搞的鬼,那么只能在客户端处理好了图片之后再上传到服务器了。

解决办法:iOS UIImagePickerController result image orientation after upload
代码:

@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;
        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.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;
}

这里有一篇文章 如何处理iOS中照片的方向,解释的非常好。

摘抄内容:
一、图像矩阵变换
1.图像的原点在左下角
2.矩阵变换时,后面的矩阵先作用,前面的矩阵后作用

二、EXIF中Orientation的定义一一对应:

Paste_Image.png
上一篇下一篇

猜你喜欢

热点阅读