La etiqueta img muestra una orientación incorrecta

142

Tengo una imagen en este enlace: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Como puede ver, esta es una imagen normal con la orientación correcta. Sin embargo, cuando configuro este enlace al atributo src de mi etiqueta de imagen, la imagen se pone boca abajo. http://jsfiddle.net/7j5xJ/

<img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/>
Expandir fragmento

¿Tienes alguna idea de lo que está pasando?

html css image The Lazy Log
fuente
En Firefox está al revés en ambos casos. Creo que Chrome es lo suficientemente inteligente como para rotarlo automáticamente según la información EXIF.
dfsq
¿Mmm en serio? En mi Firefox, el original sigue siendo normal y la imagen en img está al revés.
The Lazy Log
1
Creo que la imagen en sí está al revés y cloudfrontpodría estar rotando en la página. Puede forzar una rotación a través de CSS jsfiddle.net/7j5xJ/1
Kevin Lynch
2
regex.info/... Tiene Orientation: Rotate 180en EXIF.
dfsq
1
Es un problema con los metadatos de las fotos que especifica la orientación. No sé por qué la etiqueta de imagen no tiene en cuenta esto. Todavía no he encontrado buenas respuestas ...
Chet

Respuestas:

91

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 paraimage-orientation .

Simplemente agregue esto a su CSS:

img {
    image-orientation: from-image;
}

Según las especificaciones del 25 de enero de 2016, Firefox e iOS Safari (detrás de un prefijo) son los únicos navegadores que admiten esto. Todavía veo problemas con Safari y Chrome. Sin embargo, Safari móvil parece soportar de forma nativa la orientación sin la etiqueta CSS.

Supongo que tendremos que esperar y ver si los navegadores comienzan a ser compatibles image-orientation.

Chet
fuente
3
Extrañamente los navegadores que probé (Safari, Chrome y Firefox en Mac en sus recientes encarnaciones) manejan la bandera correctamente cuando la imagen se muestra directamente sin ningún HTML a su alrededor.
anw
2
Cuidado con esto ya que es experimental. Echa un vistazo a la compatibilidad del navegador, no se ve bien para la mayoría de los navegadores. Esperemos que solucionen esto en algún momento.
lostintranslation
35
Esto no es compatible con la mayoría de los navegadores de hoy caniuse.com/#search=image-orientation
Gabriel C
2
¿Por qué en el mundo las imágenes tienen incluso metadatos de orientación? Si realmente quisieras rotar la imagen, ¿no cambiarías los píxeles y cambiarías el ancho por la altura?
Jack Giffin
15
¿Cómo ha tenido tantos votos a favor? Es extremadamente incompatible y no funciona para nada además de firefox caniuse.com/#search=image-orientation
Un amigo
26

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

Ábralo en Chrome: bien arriba Ábralo en FF: bien arriba Ábralo en IE: al revés

Ábralo en Paint: boca abajo. Ábralo en Photoshop: arriba. etc.

i-CONICA
fuente
1
¿Tienes alguna idea de cómo podemos evitar esto antes de que el usuario cargue la imagen? Como esta imagen es cargada directamente por el usuario, necesito encontrar una manera de superar esto
The Lazy Log
Si se trata de un servicio que hospedará imágenes, será mejor que vuelva a codificar las imágenes de todos modos, por razones de tamaño, tamaño de archivo y seguridad, por lo que esto puede solucionarlos en la versión codificada.
i-CONICA
Veo. Necesitaré encontrar una mejor manera de manejar esto. Tal vez necesito procesar la imagen después de que se haya cargado en S3
The Lazy Log
Puede usar la biblioteca GD en PHP.
i-CONICA
55
Una forma más sencilla sería eliminar los metadatos de orientación y voltear la imagen. Imagemagick proporciona la función convert -autoorient que hará esto.
saurabheights
19

Si tiene acceso a Linux, abra una terminal, cd al directorio que contiene sus imágenes y luego ejecute

mogrify -auto-orient *

Esto debería solucionar permanentemente los problemas de orientación en todas las imágenes.

Paul Chris Jones
fuente
44
Esto funcionó para mí, es posible que deba ejecutar brew install imagemagicken Mac si lo obtienecommand not found: mogrify
Kyle
Hasta la siguiente imagen ... ¿tiene alguna desventaja?
Harry Bosh
12

Olvidé agregar mi propia respuesta aquí. Estaba usando Ruby on Rails, por lo que podría no ser aplicable a sus proyectos en PHP u otros marcos. En mi caso, estaba usando la gema Carrierwave para subir las imágenes. Mi solución fue agregar el siguiente código a la clase de cargador para solucionar el problema EXIF ​​antes de guardar el archivo.

process :fix_exif_rotation
def fix_exif_rotation
  manipulate! do |img|
    img.auto_orient!
    img = yield(img) if block_given?
    img
  end
end
The Lazy Log
fuente
1
buena respuesta, pero ¿cómo puedo llamar a este método en un archivo de imagen existente?
Matrix
Tienes que recrear versiones. Supongo que algo como esto funcionaría: stackoverflow.com/a/9065832/461640
The Lazy Log
11

guardar como png resolvió el problema para mí.

Seyed Mostafa Mousavi Kahaki
fuente
1
Esta solución solo es útil para imágenes que no son fotografías: "El formato JPG es un formato de archivo comprimido con pérdida. Esto lo hace útil para almacenar fotografías en un tamaño más pequeño que un BMP. JPG es una opción común para usar en la Web porque es comprimido. Para almacenar dibujos lineales, texto y gráficos icónicos en un tamaño de archivo más pequeño, GIF o PNG son mejores opciones porque no tienen pérdidas ". - labnol.org/software/tutorials/…
Kc Gibson
impresionante, Resuelto Gracias
T. Shashwat
2
Lo guardé como PNG, luego nuevamente a JPG que mantiene el tamaño del archivo bajo y guarda la orientación correctamente, gracias.
MDave
10

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

rotate.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>

rotate.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";
            }
        });
};
VMQ
fuente
exif-js ahora está tan desactualizado y sin mantenimiento que falla en algunos entornos, como en cualquier lugar donde el modo estricto esté habilitado. Realmente necesitamos una solución para esto. Mi aplicación me está frustrando y cada solución que he encontrado tiene muchas desventajas.
Metodista
9

Puede usar Exif-JS para verificar 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)')
});
bsap
fuente
7

Este problema también me estaba volviendo loco. Estaba usando PHP en el lado de mi servidor, por lo que no pude usar las soluciones @The Lazy Log (ruby) y @deweydb (python). Sin embargo, me señaló 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

usuario4504661
fuente
6

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

Trace DeCoy
fuente
1
Ah, ¿entonces esto solo ocurre con las imágenes tomadas por el teléfono Samsung?
The Lazy Log
44
Sucede con varios. Lo he visto también en iPhones.
Trace DeCoy
Los metadatos EXIF ​​pueden incluir información sobre la fotografía en sí (velocidad de obturación, apertura de la lente, sensibilidad iso, distancia focal, etc.), datos de contexto (fecha, hora, temperatura, humedad) y pueden contener las coordenadas GPS y el ángulo de rotación redondeado hasta 90 ° múltiple. La gran mayoría de los teléfonos inteligentes y las cámaras actuales colocan estos metadatos en el bloque EXIF, por lo que, en mi humilde opinión, es solo cuestión de tiempo que los navegadores apliquen la rotación de fotogramas correcta automáticamente.
ManuelJE
5

Hasta que CSS: image-orientation:from-image;sea ​​más universalmente compatible, estamos haciendo una solución del lado del servidor con python. Aquí está la esencia de esto. Comprueba la orientación de los datos exif, luego gira la imagen en consecuencia y vuelve 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 suceder una vez al cargar el archivo.

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)
deweydb
fuente
3

Ocurre ya que la orientación original de la imagen no es la que vemos en el visor de imágenes. En tales casos, la imagen se muestra vertical para nosotros en el visor de imágenes, pero en realidad es horizontal.

Para resolver esto, haga lo siguiente:

  1. Abra la imagen en el editor de imágenes como paint (en windows) o ImageMagick (en linux).

  2. Gire la imagen hacia la izquierda / derecha.

  3. Guarda la imagen.

Esto debería resolver el problema de forma permanente.

Yuvraj Patil
fuente
1

Una manera fácil de solucionar el problema, sin codificación, es utilizar la función de exportación Guardar para 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 guardo los derechos de autor y la información de contacto. Además, dado que las imágenes que provienen directamente de una cámara digital son demasiado grandes para la visualización web, es una buena idea reducirlas a través de Guardar para la Web de todos modos. Para aquellos que no son expertos en Photoshop, no tengo dudas de que hay recursos en línea para cambiar el tamaño de una imagen y despojarla de cualquier información EXIF ​​innecesaria.

AlGator
fuente
44
Pero si está desarrollando una aplicación donde los usuarios pueden elegir cualquier imagen para cargar, ¿cómo usar Photoshop en ese caso? :)
The Lazy Log
1

Creo que hay algunos problemas en la orientación de la imagen de reparación automática del navegador, por ejemplo, si visito la imagen directamente, muestra la orientación correcta, pero muestra una orientación incorrecta en algunas páginas html de salida.

Kai Zou
fuente
-19

Utiliza un estilo externo. en la hoja html dale el nombre de la clase a la etiqueta. en la hoja de estilo use 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);
 }
msd
fuente
No es una solución generalizada. Trabajará específicamente en la imagen proporcionada en cuestión
th3pirat3