image clicked from iPhone in Portrait mode gets rotated by 90 degree

Question

I am uploading an image clicked from iphone both in landscape and portrait mode. The image with landscape mode is uploaded fine but the issue is with the image uploaded with portrait mode. They gets rotated by 90 degree.

Also other images with portrait mode(not clicked from iPhone) works fine.

Any idea why such happens?

Obed

where are you uploading it to? – Damara

I am uploading it to my server – Obed

Actually the image was already rotated but it was displayed properly on iPhone as well as mac. – Obed

I have the same issue. Spent hours to resolve but not getting around. I am trying to rotate image -90 degree when taken in portrait mode but it changes the size of the image! Could you please share your code? – Inkerman

@AppleDeveloper Set your UIImagePickerController "allowsEditing" property to yes. and you are done :) . Please check out the Second option in the below answer which is accepted – Obed

Yah I tried it but still it doesn't work for me! Allowsediting allows you to crop the image but it still rotates the image taken in portrait mode! – Inkerman

Image appears correct until I have it stored in as UIImage, once I upload it to my server as UIImagePNGRepresentation - NSData and get it back and display, its rotated 90 degree!!!! Very annoying! – Inkerman

Dude.. If you check the image on windows machine you will know that the issue is neither in uploading nor in downloading... allowsEditing worked for me though.. So i didn't went into much detail :) – Obed

Try this for once :- https://mcmap.net/q/92948/-ios-uiimagepickercontroller-result-image-orientation-after-upload – Shaff

Good sample code you can grab here (but only source code) cocoapods.org/pods/UIImage-ImagePickerCrop Great example of using CGAffineTransformRotate BTW – Epitomize

Answer 1

In your delegate:

   - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info

After you get your UIImage from "info" dictionary for the key "UIImagePickerControllerOriginalImage" ,You can see the image orientation by imageOrientation property. If is not like you want just rotate your image before you upload it.

imageOrientation
The orientation of the receiver’s image. (read-only)

@property(nonatomic, readonly) UIImageOrientation imageOrientation
Discussion
Image orientation affects the way the image data is displayed when drawn. By default, images are displayed in the “up” orientation. If the image has associated metadata (such as EXIF information), however, this property contains the orientation indicated by that metadata. For a list of possible values for this property, see “UIImageOrientation.”

Availability
Available in iOS 2.0 and later.
Declared In
UIImage.h 

UIImage Class Reference

UIImagePickerController Class Reference

UIImagePickerControllerDelegate Protocol Reference

Second option:

Is to allow user to edit your image and get the image for "UIImagePickerControllerEditedImage";

Set your UIImagePickerController "allowsEditing" property to Yes.

In your delegate just get from the "info" dictionary the UIImage for the "UIImagePickerControllerEditedImage" key.

Good luck.

Burkitt

Thats exactly what I have thought of. But my issue is that everything works fine when the image to be uploaded is not clicked from iPhone. But only if its clicked through iPhone it gets rotated. So is the issue with iPhone orientation that when it convert the image to nsdate it gives the data in the rotated form? – Obed

After you get the uiimage test for image orientation and rotate it if it has wrong orientation and the convert it to nsdata. – Burkitt

The issue is when i upload a normal portrait image then it works fine but when i upload the portrait image captured from iPhone then only it gets rotated. Also If I see that image on windows machine it is already rotated but when I see the same image on Mac or iPhone it looks fine. – Obed

Hi @AlexTerente If I take image in portrait mode and rotate -90 degree its changes the size of the image. I am using pattrick code given below. – Inkerman

Make sure that the sizes used by CGContextTranslateCTM and CGContextDrawImage are correct. – Burkitt

Answer 2

I've wrestled with this problem quite a bit, I was working on a project where I need to actually rotate the image, as in re-arrange the pixels so that I could upload it.

First thing you need to do is determine the orientation, then strip off that pesky meta data, then rotate the image.

So put this inside of the didFinishPickingMediaWithInfo function:

    UIImage * img = [info objectForKey:@"UIImagePickerControllerOriginalImage"];

    if ([info objectForKey:@"UIImagePickerControllerMediaMetadata"]) {
    //Rotate based on orientation
    switch ([[[info objectForKey:@"UIImagePickerControllerMediaMetadata"] objectForKey:@"Orientation"] intValue]) {
        case 3:
            //Rotate image to the left twice.
            img = [UIImage imageWithCGImage:[img CGImage]];  //Strip off that pesky meta data!
            img = [rotateImage rotateImage:[rotateImage rotateImage:img withRotationType:rotateLeft] withRotationType:rotateLeft];
            break;

        case 6:
            img = [UIImage imageWithCGImage:[img CGImage]];
            img = [rotateImage rotateImage:img withRotationType:rotateRight];
            break;

        case 8:
            img = [UIImage imageWithCGImage:[img CGImage]];
            img = [rotateImage rotateImage:img withRotationType:rotateLeft];
            break;

        default:
            break;
    }
}

And here is the resize function:

+(UIImage*)rotateImage:(UIImage*)image withRotationType:(rotationType)rotation{
    CGImageRef imageRef = [image CGImage];
    CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef);
    CGColorSpaceRef colorSpaceInfo = CGColorSpaceCreateDeviceRGB();

    if (alphaInfo == kCGImageAlphaNone)
        alphaInfo = kCGImageAlphaNoneSkipLast;

        CGContextRef bitmap;

    bitmap = CGBitmapContextCreate(NULL, image.size.height, image.size.width, CGImageGetBitsPerComponent(imageRef), 4 * image.size.height/*CGImageGetBytesPerRow(imageRef)*/, colorSpaceInfo, alphaInfo);
    CGColorSpaceRelease(colorSpaceInfo);

    if (rotation == rotateLeft) {
        CGContextTranslateCTM (bitmap, image.size.height, 0);
        CGContextRotateCTM (bitmap, radians(90));
    }
    else{
        CGContextTranslateCTM (bitmap, 0, image.size.width);
        CGContextRotateCTM (bitmap, radians(-90));
    }

    CGContextDrawImage(bitmap, CGRectMake(0, 0, image.size.width, image.size.height), imageRef);
    CGImageRef ref = CGBitmapContextCreateImage(bitmap);
    UIImage *result = [UIImage imageWithCGImage:ref];
    CGImageRelease(ref);
    CGContextRelease(bitmap);
    return result;
}

The img variable now contains a properly rotated image.

Rattray

Answer 3

Ok, a cleaner version would be :

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
    UIImage *img = [info valueForKey:UIImagePickerControllerOriginalImage];
    img = [UIImage imageWithCGImage:[img CGImage]];

    UIImageOrientation requiredOrientation = UIImageOrientationUp;
    switch ([[[info objectForKey:@"UIImagePickerControllerMediaMetadata"] objectForKey:@"Orientation"] intValue])
    {
        case 3:
            requiredOrientation = UIImageOrientationDown;
             break;
        case 6:
            requiredOrientation = UIImageOrientationRight;
            break;
        case 8:
            requiredOrientation = UIImageOrientationLeft;
            break;
        default:
            break;
    }

    UIImage *portraitImage = [[UIImage alloc] initWithCGImage:img.CGImage scale:1.0 orientation:requiredOrientation];

}

Thorma