2009-06-25 15 views
8

Ich benutze UIImagePickerController, um ein Foto im Hochformat auf dem iPhone zu machen und im Internet zu speichern. Das Foto erscheint im Hochformat auf dem Telefon, dreht sich jedoch um 90 Grad im Web.iPhone Kamera Bilder werden gedreht, wenn ins Web hochgeladen

Wenn ich das Foto herunterladen und es in Vorschau (Mac) oder Photoshop (Mac oder PC) anschauen, ist es wieder im Hochformat. Im Windows-Bildbetrachter (PC) wird es in Querformat gedreht.

Muss ich vor dem Hochladen eine Rotationstransformation auf die Bilddaten anwenden? Muss ich dann auch die Metadaten entfernen, die es in Photoshop und in der Vorschau drehen?

Antwort

7

Das Problem war, dass Bildrotation zum Foto als EXIF-Daten hinzugefügt wurde, die von den meisten Browsern nicht verwendet werden. Es gibt zwei Lösungen:

  1. Wenden Sie die Drehung auf der Serverseite an. Ich benutzte das Ruby-Plugin Paperclip (von Thoughtbot) und musste einfach die Option für die automatische Ausrichtung in den has_attached_file-Befehl im Modell einfügen:

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

  2. Drehen Sie das Foto in der iPhone App. Dies wurde in einer weiteren Stackoverflow-Frage gelöst; Der Aufruf der scaleAndRotate method ersetzt die Rotations-Metadaten mit einer Bildtransformation, dank @Squeegy.

+0

# 2 funktioniert gut – byron

0

Sobald Sie das Foto, bevor das Bild auf dem Server nur Ihr aufgenommenes Bild in ein Verfahren und vollzieht ihre sicher für Sie arbeitet

Hochladen
#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; 
} 
+0

Ich glaube, Ihre Kommentare sind falsch. Z.B. UIImageOrientationUp: // EXIF ​​= 0 – jonypz

-1

Hier ist eine einfache Möglichkeit, die EXIF-Rotations-Metadaten manuell zu überschreiben, wenn das Bild in der richtigen Ausrichtung in MS Windows gespeichert wird. Klicken Sie im Windows Explorer mit der rechten Maustaste auf die Bilddatei und wählen Sie "Im Uhrzeigersinn drehen". Führen Sie dies viermal durch, um das Bild vollständig zu drehen, und dann wird das Bild für alle Systeme korrekt ausgerichtet. Dann können Sie das Bild auf Ihren Webserver hochladen.

Verwandte Themen