html - online - ¿Hay alguna manera de decirle a los navegadores que respeten la orientación jpeg exif?

jpeg metadata online

Question

Sé que la rotación automática de los archivos JPG está desactivada en los navegadores.

No pueden habilitarlo porque rompería el diseño de algunos sitios web.

¿Hay una propiedad CSS? o código de JavaScript para lograr eso? ¿o algo mas? o tal vez la solución a este problema no existe todavía?

Answer 1

Imagen de CSS orientada: desde la imagen

de las especificaciones https://www.w3.org/TR/css4-images/#the-image-orientation

6.2. Orientando una imagen en la página: la propiedad ''orientación de la imagen''

orientación de la imagen: desde la imagen

from-image: si la imagen tiene una orientación especificada en sus metadatos, como EXIF, este valor se calcula según el ángulo que especifica el metadato para orientar correctamente la imagen. Si es necesario, este ángulo se redondea y normaliza como se describe arriba para un valor. Si no hay una orientación especificada en sus metadatos, este valor se computa a ''0deg''.

Matching Chrome-Issue: https://bugs.chromium.org/p/chromium/issues/detail?id=158753

Pero la compatibilidad con el navegador no está aquí todavía: https://developer.mozilla.org/en/docs/Web/CSS/image-orientation#Browser_compatibility

Girar a través de JS

Hay un fragmento de JS para hacer esto: https://gist.github.com/runeb/c11f864cd7ead969a5f0

Mi conclusión

Creo que rotar la imagen en el servidor con herramientas como imagemagick es demasiado alto.

El navegador puede rotar la imagen, pero la aplicación web necesita dar consejos sobre cómo rotar esto de forma explícita.

Esta rotación explícita en el navegador podría hacerse así: https://.com/a/11832483/633961

Answer 2

Como dijo el cartel anterior, tendrá que rotar la imagen en sí. Pero al lado de eso, es posible que también desee establecer / restablecer la etiqueta de rotación en el EXIF. De esta forma evitará que los espectadores que respetan la etiqueta de orientación la rotarán nuevamente. Una herramienta que puede editar el EXIF ​​para usted se llama ExifTool y es gratuita.

Answer 3

He escrito un pequeño script php que rota la imagen. Asegúrese de guardar la imagen a favor de simplemente recalcularla en cada solicitud.

<?php

header("Content-type: image/jpeg");
$img = ''IMG URL'';

$exif = @exif_read_data($img,0,true);
$orientation = @$exif[''IFD0''][''Orientation''];
if($orientation == 7 || $orientation == 8) {
    $degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
    $degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
    $degrees = 180;
} else {
    $degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);

?>

Aclamaciones

Answer 4

La herramienta exifautotran se puede usar de antemano para reemplazar rápidamente la orientación EXIF ​​por la predeterminada ( 1 , para "arriba a la izquierda") y girar la imagen automáticamente para que la imagen se vea igual que antes de la transformación. A continuación, puede utilizar los archivos JPG así obtenidos en una página web sin preocuparse por eso:

a@b:~/a/b/100_PANA$ exifautotran *.JPG
Executing: jpegtran -copy all -rotate 90 P1000638.JPG
Executing: jpegtran -copy all -rotate 270 P1000641.JPG
Executing: jpegtran -copy all -rotate 90 P1000642.JPG
Executing: jpegtran -copy all -rotate 90 P1000645.JPG
…

Answer 5

Utilizamos imagemagick para rotar las imágenes de acuerdo con su información de orientación exif. Tal vez esa sería una opción para ti?