la etiqueta img muestra una orientación incorrecta

Encontré parte de la solución. Las imágenes ahora tienen metadatos que especifican la orientación de la foto. Hay una nueva especificación CSS para image-orientation.

Simplemente agrega esto a tu CSS:

img {
    image-orientation: from-image;
}

De acuerdo con las especificaciones del 25 de enero de 2016, Firefox e iOS Safari (detrás de un prefijo) son los únicos navegadores que admiten esto. Estoy viendo problemas con Safari y Chrome todavía. Sin embargo, mobile Safari parece admitir la orientación de forma nativa sin la etiqueta CSS.

Supongo que tendremos que esperar y ver si los navegadores testamentos comienzan a soportar image-orientation.

Tu imagen está al revés. Pero tiene un atributo meta "Orientación" que le dice al espectador que debe ser el girado 180 grados. Algunos dispositivos / espectadores no obedecen esta regla.

Abrirlo en Chrome: hacia arriba Ábrelo en FF: hacia arriba Ábrelo en IE: al revés

Ábrelo en Pintura: Boca abajo Ábrelo en Photoshop: Hacia arriba. sucesivamente.

Son los datos EXIF que incorpora su teléfono Samsung.

Puede utilizar Exif-JS, para comprobar la propiedad "Orientación" de la imagen. Luego aplique una transformación css según sea necesario.

EXIF.getData(imageElement, function() {
                var orientation = EXIF.getTag(this, "Orientation");

                if(orientation == 6)
                    $(imageElement).css('transform', 'rotate(90deg)')
});  

Una manera fácil de solucionar el problema, sin codificación, es usar la función Guardar para exportación web de Photoshop. En el cuadro de diálogo se puede elegir eliminar todos o la mayoría de los datos EXIF de una imagen. Por lo general, solo conservo los derechos de autor y la información de contacto. Además, dado que las imágenes que vienen directamente de una cámara digital son muy grandes para la pantalla web, es una buena idea reducirlas a través de Save for the Web de todos modos. Para aquellos que no son expertos en Photoshop, no tengo ninguna duda de que hay recursos en línea para cambiar el tamaño de un imagen y despojarlo de cualquier dato EXIF innecesario.

Hasta que CSS: image-orientation:from-image; sea más universalmente soportado, estamos haciendo una solución del lado del servidor con python. Esto es lo esencial. Verifique la orientación de los datos exif, luego gire la imagen en consecuencia y vuelva a guardar.

Preferimos esta solución sobre las soluciones del lado del cliente, ya que no requiere cargar bibliotecas adicionales del lado del cliente, y esta operación solo tiene que ocurrir una vez en la carga de archivos.

if fileType == "image":
    exifToolCommand = "exiftool -j '%s'" % filePath
    exif = json.loads(subprocess.check_output(shlex.split(exifToolCommand), stderr=subprocess.PIPE))
    if 'Orientation' in exif[0]:
        findDegrees, = re.compile("([0-9]+)").search(exif[0]['Orientation']).groups()
        if findDegrees:
            rotateDegrees = int(findDegrees)
            if 'CW' in exif[0]['Orientation'] and 'CCW' not in exif[0]['Orientation']:
                rotateDegrees = rotateDegrees * -1
            # rotate image
            img = Image.open(filePath)
            img2 = img.rotate(rotateDegrees)
            img2.save(filePath)

Guardar como png resolvió el problema para mí.

Este problema me estaba volviendo loco también. Estaba usando PHP en mi lado del servidor, así que no pude usar las soluciones @The Lazy Log(ruby) y @ deweydb(python). Sin embargo, me indicó la dirección correcta. Lo arreglé en la copia de seguridad usando getImageOrientation () de Imagick.

<?php 
// Note: $image is an Imagick object, not a filename! See example use below. 
function autoRotateImage($image) { 
    $orientation = $image->getImageOrientation(); 

    switch($orientation) { 
        case imagick::ORIENTATION_BOTTOMRIGHT: 
            $image->rotateimage("#000", 180); // rotate 180 degrees 
        break; 

        case imagick::ORIENTATION_RIGHTTOP: 
            $image->rotateimage("#000", 90); // rotate 90 degrees CW 
        break; 

        case imagick::ORIENTATION_LEFTBOTTOM: 
            $image->rotateimage("#000", -90); // rotate 90 degrees CCW 
        break; 
    } 

    // Now that it's auto-rotated, make sure the EXIF data is correct in case the EXIF gets saved with the image! 
    $image->setImageOrientation(imagick::ORIENTATION_TOPLEFT); 
} 
?> 

Aquí está el enlace si quieres leer más. http://php.net/manual/en/imagick.getimageorientation.php

Esta respuesta se basa en la respuesta de bsap usando Exif-JS , pero no depende de jQuery y es bastante compatible incluso con navegadores más antiguos. Los siguientes son ejemplos de archivos html y js:

Rotar.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
  <html>
  <head>
    <style>
      .rotate90 {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       transform: rotate(90deg);
      }
      .rotate180 {
       -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
       transform: rotate(180deg);
      }
      .rotate270 {
       -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
       -o-transform: rotate(270deg);
       -ms-transform: rotate(270deg);
       transform: rotate(270deg);
      }
    </style>
  </head>
  <body>
    <img src="pic/pic03.jpg" width="200" alt="Cat 1" id="campic" class="camview">
    <script type="text/javascript" src="exif.js"></script>
    <script type="text/javascript" src="rotate.js"></script>
  </body>
  </html>

Rotar.js:

window.onload=getExif;
var newimg = document.getElementById('campic');
function getExif() {
    EXIF.getData(newimg, function() {
            var orientation = EXIF.getTag(this, "Orientation");
            if(orientation == 6) {
                newimg.className = "camview rotate90";
            } else if(orientation == 8) {
                newimg.className = "camview rotate270";
            } else if(orientation == 3) {
                newimg.className = "camview rotate180";
            }
        });
};

Utilice estilos externos. en la hoja html dar el nombre de la clase a la etiqueta. en la hoja de estilo utilice el operador de punto precedido por el nombre de la clase y luego escriba el siguiente código

.rotate180 {
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 transform: rotate(180deg);
 }