Las imágenes de la cámara del iPhone se giran cuando se cargan en la Web

Question

Estoy usando UIImagePickerController para tomar una foto en modo vertical en el iphone y guardarla en la Web. La foto aparece en retrato en el teléfono, pero gira 90 grados en la web.

Si descargo la foto y la miro en Vista previa (mac) o Photoshop (mac o pc) vuelve a estar en retrato. En Windows Picture Viewer (pc) se gira a horizontal.

¿Debo aplicar una transformación de rotación a los datos de imagen antes de cargar? ¿También tendré que eliminar los metadatos que están girando en Photoshop y en Vista previa?

Answer 1

El problema era que la rotación de imágenes se agregaba a la foto como datos EXIF ​​no utilizados por la mayoría de los navegadores. Hay dos soluciones:

1. Aplicar la rotación en el lado del servidor. Estaba usando el complemento Ruby Paperclip (por Thoughtbot) y solo tuve que incluir la opción de conversión de orientación automática al comando has_attached_file en el modelo:

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

2. Gire la foto dentro de la aplicación de iPhone. Esto fue resuelto en otra pregunta de stackoverflow; llamando al scaleAndRotate method reemplaza los metadatos de rotación con una transformación de imagen, gracias a @Squeegy.

Answer 2

Aquí es una solución para CarrierWavew/MiniMagick: http://carrierwave.rubyforge.org/rdoc/classes/CarrierWave/MiniMagick.html

Answer 3

Una vez que se toma la foto antes de subir la imagen al servidor sólo tiene que pasar su imagen tomada en un método y su seguridad que funcione para usted

#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; 
} 

Answer 4

Aquí hay una manera fácil de anular manualmente los metadatos de rotación EXIF, si la imagen se guarda con la orientación correcta en MS Windows. En el Explorador de Windows, haga clic derecho en el archivo de imagen y seleccione "Girar en el sentido de las agujas del reloj". Haga esto 4 veces para rotar la imagen completamente, y luego la imagen tendrá la orientación correcta para todos los sistemas. Luego puedes subir la imagen a tu servidor web.