Imagen girada automáticamente al cargar

Question

Estoy tratando de cargar una imagen codificada en base64 y guardarla después de decodificarla. La imagen se está cargando y guardando, y puedo acceder a ella usando una URL y todo ... pero la imagen se gira 90 grados en sentido antihorario y no tengo ni idea ¿POR QUÉ?

El lugar donde obtengo los datos codificados está bien, ¡ya que ponerlo en <img /> funciona bien!

function saveImageData($base64Data) { 
    $base64_decoded = base64_decode($base64Data); 
    $im = imagecreatefromstring($base64_decoded); 
    if ($im !== false) { 
     $imagepath = '/public/uploads/' . time() . '.jpg'; 
     imagejpeg($im, $imagepath); 
     chmod($imagepath, 0755); 
     imagedestroy($im); 
    } else { 
     return false; 
    } 
    return $imagepath; 
} 

No estoy utilizando ninguna función de rotación, pero sigue girando. Puedo usar una función PHP GD como imagerotate, pero no quiero por razones como fondos negros, etc.

Si puedes ayudar ... ¡eres la persona más increíble!

Answer 1

Supongo que la imagen que está cargando en realidad está girada, pero se está corrigiendo porque contiene datos de rotación en su sección EXIF. (Por ejemplo, una cámara puede tener conocimiento de la orientación vertical al tomar una fotografía y guardarla en los datos EXIF; algunos programas de visualización conocen los datos de rotación y rotarán automáticamente la foto cuando la visualicen). , la imagen podría ser que aparece para rotarla, dependiendo de lo que esté usando para verla.

¿Estás viendo las imágenes "antes de subir" y "después de subir" usando el mismo software? ¿Qué sucede si los miras a los dos usando el mismo navegador web, por ejemplo?

¿Qué ocurre si prueba una imagen diferente, preferiblemente de una fuente diferente? ¿Tiene algún software que le permita ver los datos EXIF ​​de la imagen? Busque el valor de "Orientación"; cualquier cosa que no sea "1" significa que hay un conjunto de rotación para la imagen (consulte this page para una descripción decente).

Así que, en resumen, diría que la imagen subyacente en el archivo JPEG está en "incorrecto" "orientación, y los datos EXIF ​​contienen información para corregir esa rotación para su visualización. Esto es muy probable si la fuente es, por ejemplo, un iPhone, que acaba de jugar con el mío, parece almacenar sus datos de imagen subyacentes en orientación horizontal, pero establece los datos EXIF ​​si la imagen se tomó realmente (y por lo tanto debe mostrarse)) como retrato.

La mejor manera de solucionarlo es casi seguro que examine los datos EXIF ​​en el archivo después de la carga, utilizando el PHP EXIF functions y gire la imagen según sea necesario para corregir la orientación antes de guardar su propia copia.

Answer 2

Experimenté este problema al hacer una aplicación híbrida móvil que utilizaba Cordova para acceder a la cámara de un teléfono móvil y luego publicar la imagen en el servidor. Lo resolví estableciendo la propiedad correctOrientation en verdadero.

navigator.camera.getPicture(onSuccess, onFail, 
         { 
          quality: 80, 
          destinationType:Camera.DestinationType.DATA_URL, 
          correctOrientation : true 
         }); 

Answer 3

<?php 
if (isset($_POST['submit'])) { 
    $filename = $_FILES['file']['name']; 
    $filePath = $_FILES['file']['tmp_name']; 
    $exif = exif_read_data($_FILES['file']['tmp_name']); 
    echo "<pre>"; 
    print_r($exif); 
    echo "</pre>"; 
    if (!empty($exif['Orientation'])) { 
     $imageResource = imagecreatefromjpeg($filePath); 
     switch ($exif['Orientation']) { 
      case 3: 
       $image = imagerotate($imageResource, 180, 0); 
       break; 
      case 6: 
       $image = imagerotate($imageResource, -90, 0); 
       break; 
      case 8: 
       $image = imagerotate($imageResource, 90, 0); 
       break; 
      default: 
       $image = $imageResource; 
     } 
     imagejpeg($image, $filename, 90); 
    } 
} 
?> 
<form class="form-horizontal" method="post" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <div class="col-md-9"> 
      <div class="input-group"> 
       <span class="input-group-btn"> 
        <span class="btn btn-default btn-file"> 
         Choose img<input type="file" name="file" id="imgInp"> 
        </span> 
       </span> 

      </div> 
     </div> 
    </div> 
    <button name="submit" type="submit">Send</button> 
</form>