iPhone相机拍摄的照片上传到网页后会发生旋转。

Question

我正在使用UIImagePickerController在iPhone上拍摄肖像模式的照片并保存到Web。照片在手机上呈现为肖像模式，但在Web上旋转了90度。

如果我下载照片并在预览（Mac）或Photoshop（Mac或PC）中查看，它又变成了肖像模式。在Windows图片查看器（PC）中，它被旋转成了横向模式。

在上传之前，我需要对图像数据应用旋转变换吗？那么我是否还需要删除在Photoshop和预览中旋转它的元数据？

- Arrel

Answer 1

问题在于图片旋转被添加为EXIF数据而大多数浏览器不使用。有两种解决方案：

1. 在服务器端应用旋转。我使用的是Ruby插件Paperclip（由Thoughtbot提供），只需在模型中的has_attached_file命令中包含auto-orient转换选项：

   has_attached_file :photo, :convert_options => { :all => '-auto-orient' }

2. 在iPhone应用程序内旋转照片。这个问题在另一个stackoverflow问题中得到了解决；调用scaleAndRotate method将旋转元数据替换为图像变换，感谢@Squeegy。

- Arrel

Answer 2

这里有一个CarrierWave/MiniMagick的解决方案：http://carrierwave.rubyforge.org/rdoc/classes/CarrierWave/MiniMagick.html。

- user284046

---

太好了！感谢您保持答案的最新状态。 - Arrel

Answer 3

在将照片上传到服务器之前，只需将拍摄的图像传递给一个方法，它一定会为您工作。

#pragma mark Rotate
- (UIImage *)scaleAndRotateImage:(UIImage *)image {
    int kMaxResolution = 640; // Or whatever

    CGImageRef imgRef = image.CGImage;

    CGFloat width = CGImageGetWidth(imgRef);
    CGFloat height = CGImageGetHeight(imgRef);


    CGAffineTransform transform = CGAffineTransformIdentity;
    CGRect bounds = CGRectMake(0, 0, width, height);
    if (width > kMaxResolution || height > kMaxResolution) {
        CGFloat ratio = width/height;
        if (ratio > 1) {
            bounds.size.width = kMaxResolution;
            bounds.size.height = roundf(bounds.size.width / ratio);
        }
        else {
            bounds.size.height = kMaxResolution;
            bounds.size.width = roundf(bounds.size.height * ratio);
        }
    }

    CGFloat scaleRatio = bounds.size.width / width;
    CGSize imageSize = CGSizeMake(CGImageGetWidth(imgRef), CGImageGetHeight(imgRef));
    CGFloat boundHeight;
    UIImageOrientation orient = image.imageOrientation;
    switch(orient) {

        case UIImageOrientationUp: //EXIF = 1
            transform = CGAffineTransformIdentity;
            break;

        case UIImageOrientationUpMirrored: //EXIF = 2
            transform = CGAffineTransformMakeTranslation(imageSize.width, 0.0);
            transform = CGAffineTransformScale(transform, -1.0, 1.0);
            break;

        case UIImageOrientationDown: //EXIF = 3
            transform = CGAffineTransformMakeTranslation(imageSize.width, imageSize.height);
            transform = CGAffineTransformRotate(transform, M_PI);
            break;

        case UIImageOrientationDownMirrored: //EXIF = 4
            transform = CGAffineTransformMakeTranslation(0.0, imageSize.height);
            transform = CGAffineTransformScale(transform, 1.0, -1.0);
            break;

        case UIImageOrientationLeftMirrored: //EXIF = 5
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(imageSize.height, imageSize.width);
            transform = CGAffineTransformScale(transform, -1.0, 1.0);
            transform = CGAffineTransformRotate(transform, 3.0 * M_PI / 2.0);
            break;

        case UIImageOrientationLeft: //EXIF = 6
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(0.0, imageSize.width);
            transform = CGAffineTransformRotate(transform, 3.0 * M_PI / 2.0);
            break;

        case UIImageOrientationRightMirrored: //EXIF = 7
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeScale(-1.0, 1.0);
            transform = CGAffineTransformRotate(transform, M_PI / 2.0);
            break;

        case UIImageOrientationRight: //EXIF = 8
            boundHeight = bounds.size.height;
            bounds.size.height = bounds.size.width;
            bounds.size.width = boundHeight;
            transform = CGAffineTransformMakeTranslation(imageSize.height, 0.0);
            transform = CGAffineTransformRotate(transform, M_PI / 2.0);
            break;

        default:
            [NSException raise:NSInternalInconsistencyException format:@"Invalid image orientation"];

    }

    UIGraphicsBeginImageContext(bounds.size);

    CGContextRef context = UIGraphicsGetCurrentContext();

    if (orient == UIImageOrientationRight || orient == UIImageOrientationLeft) {
        CGContextScaleCTM(context, -scaleRatio, scaleRatio);
        CGContextTranslateCTM(context, -height, 0);
    }
    else {
        CGContextScaleCTM(context, scaleRatio, -scaleRatio);
        CGContextTranslateCTM(context, 0, -height);
    }

    CGContextConcatCTM(context, transform);

    CGContextDrawImage(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, width, height), imgRef);
    UIImage *imageCopy = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return imageCopy;
}

- btmanikandan

---

我认为你的评论是不正确的。例如：UIImageOrientationUp：// EXIF = 0 - jonypz

Answer 4

如果图像在 MS Windows 中以正确的方向保存，则以下是手动覆盖 EXIF 旋转元数据的简单方法。在 Windows Explorer 中，右键单击图像文件，然后选择“顺时针旋转”选项。重复此操作 4 次以将图像完全旋转，然后图像将具有所有系统的正确方向。然后，您可以将图像上传到您的 Web 服务器。

- BenW