tag img exibe orientação incorreta

142

Eu tenho uma imagem neste link: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg

Como você pode ver, esta é uma imagem normal com orientação correta. No entanto, quando defino esse link como atributo src da minha tag de imagem, a imagem fica de cabeça para baixo. http://jsfiddle.net/7j5xJ/

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

Expandir snippet

Você tem alguma ideia do que está acontecendo?

html css image

— The Lazy Log
fonte

No Firefox, ele está de cabeça para baixo nos dois casos. Eu acho que o Chrome é inteligente o suficiente para girá-lo automaticamente com base em informações EXIF.

— Dfsq

Hmm, sério? No meu Firefox, o original ainda é normal e a imagem em img está de cabeça para baixo.

— The Lazy Log

1

Eu acho que a imagem em si está de cabeça para baixo e cloudfrontpode estar girando na página. Você poderia forçar uma rotação via CSS jsfiddle.net/7j5xJ/1

— Kevin Lynch

2

regex.info/… Possui Orientation: Rotate 180no EXIF.

— Dfsq

1

É um problema com os metadados da foto que especifica a orientação. Não sei por que a tag da imagem não explica isso. Ainda não encontrei boas respostas ...

— Chet

91

Encontrei parte da solução. As imagens agora têm metadados que especificam a orientação da foto. Há uma nova especificação de CSS paraimage-orientation .

Basta adicionar isso ao seu CSS:

img {
    image-orientation: from-image;
}

De acordo com as especificações de 25 de janeiro de 2016, Firefox e iOS Safari (atrás de um prefixo) são os únicos navegadores que suportam isso. Ainda estou com problemas no Safari e no Chrome. No entanto, o Safari para dispositivos móveis parece oferecer suporte nativo à orientação sem a tag CSS.

Suponho que teremos que esperar e ver se os navegadores começarão a oferecer suporte image-orientation.

— Chet
fonte

3

Estranhamente, os navegadores que testei (Safari, Chrome e Firefox no Mac em suas recentes encarnações) manipulam a bandeira corretamente quando a imagem é exibida diretamente sem nenhum HTML ao seu redor.

— anw

2

Cuidado com isso, pois é experimental. Confira a compatibilidade do navegador, que não parece boa para a maioria dos navegadores. Espero que eles resolvam isso em algum momento.

— lostintranslation

35

Esta não é compatível com a maioria dos navegadores hoje caniuse.com/#search=image-orientation

— Gabriel C

2

Por que no mundo as imagens têm metadados de orientação? Se você realmente quisesse girar a imagem, não mudaria apenas os pixels e trocaria a largura pela altura?

— precisa

15

Como isso tem tantos votos positivos? É extremamente sem suporte e não funciona para qualquer coisa além firefox caniuse.com/#search=image-orientation

— A Friend

26

Sua imagem está realmente de cabeça para baixo. Mas tem um meta-atributo "Orientação", que informa ao espectador que deve ser girado 180 graus. Alguns dispositivos / visualizadores não obedecem a essa regra.

Abra no Chrome: do jeito certo Abra no FF: do jeito certo Abra no IE: de cabeça para baixo

Abra-o no Paint: De cabeça para baixo Abra-o no Photoshop: Caminho certo. etc.

— i-CONICA
fonte

1

Você tem alguma idéia de como podemos evitá-las antes de o usuário carregar a imagem? Como esta imagem é carregada diretamente pelo usuário, então eu preciso encontrar uma maneira de superar isso

— The Lazy Log

Se for para um serviço que hospedará imagens, é melhor recodificá-las de qualquer maneira, por razões de tamanho, tamanho e segurança e, portanto, isso pode corrigi-las na versão recodificada.

— i-CONICA

Entendo. Vou precisar encontrar uma maneira melhor de lidar com isso. Talvez eu precise para processar a imagem depois de ter sido enviado para o S3

— The Lazy Log

Você pode usar a biblioteca GD em PHP.

— i-CONICA

5

Uma maneira mais simples seria remover os metadados da orientação e virar a imagem. O Imagemagick fornece a função convert -autoorient, que fará isso.

— Saurabheights

19

Se você tiver acesso ao Linux, abra um terminal, cd para o diretório que contém suas imagens e execute

mogrify -auto-orient *

Isso deve corrigir permanentemente os problemas de orientação em todas as imagens.

— Paul Chris Jones
fonte

4

Isso funcionou para mim, você pode precisar executar brew install imagemagickno mac, se você conseguircommand not found: mogrify

— Kyle

Até a próxima imagem .. tem alguma desvantagem?

— Harry Bosh

12

Esqueci de adicionar minha própria resposta aqui. Eu estava usando Ruby on Rails, por isso pode não ser aplicável aos seus projetos em PHP ou outras estruturas. No meu caso, eu estava usando a gema Carrierwave para fazer upload das imagens. Minha solução foi adicionar o seguinte código à classe do remetente para corrigir o problema EXIF antes de salvar o arquivo.

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
fonte

1

boa resposta, mas como posso chamar esse método no arquivo de imagem existente?

— Matrix

Você precisa recriar versões. Eu acho que algo como isso funcionaria: stackoverflow.com/a/9065832/461640

— The Lazy Log

11

salvar como png resolveu o problema para mim.

— Seyed Mostafa Mousavi Kahaki
fonte

1

Esta solução é útil apenas para imagens que não são fotografias: "O formato JPG é um formato de arquivo compactado com perda. Isso o torna útil para armazenar fotografias em um tamanho menor que um BMP. JPG é uma opção comum para uso na Web porque é Para armazenar desenhos de linhas, texto e gráficos icônicos em um tamanho de arquivo menor, GIF ou PNG são melhores opções porque são sem perdas ". - labnol.org/software/tutorials/…

— Kc Gibson,

impressionante, Resolvido Obrigado #

— T. Shashwat

2

Salvei como PNG e, em seguida, novamente em JPG, que mantém o tamanho do arquivo baixo e salva a orientação corretamente, obrigado.

— MDave 21/09/19

10

Essa resposta se baseia na resposta da bsap usando Exif-JS , mas não depende do jQuery e é bastante compatível mesmo com navegadores mais antigos. A seguir estão exemplos de arquivos html e 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
fonte

O exif-js agora está tão desatualizado e sem manutenção que falha em alguns ambientes, como em qualquer lugar onde o modo estrito está ativado. Nós realmente precisamos de uma solução para isso. Meu aplicativo está me frustrando e todas as soluções que encontrei têm amplas desvantagens.

— Methodician

9

Você pode usar o Exif-JS , para verificar a propriedade "Orientação" da imagem. Em seguida, aplique uma transformação css, conforme necessário.

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

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

— bsap
fonte

7

Esse problema também estava me deixando louco. Eu estava usando PHP no meu servidor, então não pude usar as soluções @ The Lazy Log (ruby) e @deweydb (python). No entanto, ele me indicou a direção certa. Corrigi-o nas costas usando getImageOrientation () da 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); 
} 
?>

Aqui está o link, se você quiser ler mais. http://php.net/manual/en/imagick.getimageorientation.php

— user4504661
fonte

6

São os dados EXIF que o seu telefone Samsung incorpora.

— Trace DeCoy
fonte

1

Ah, então isso só ocorre com as imagens tiradas pelo telefone Samsung?

— The Lazy Log

4

Acontece com vários. Eu já vi isso em iPhones também.

— Trace DeCoy

Os metadados EXIF podem incluir informações sobre a própria fotografia (velocidade do obturador, abertura da lente, sensibilidade iso, distância do foco, etc.), dados de contexto (data, hora, temperatura, umidade) e podem conter as coordenadas do GPS e o ângulo de rotação arredondado múltiplo de até 90 °. A grande maioria dos smartphones e câmeras de hoje coloca esses metadados no bloco EXIF, então IMHO é apenas uma questão de tempo que os navegadores aplicam a rotação correta do quadro automaticamente.

— ManuelJE

5

Até que o CSS: image-orientation:from-image;seja mais universalmente suportado, estamos fazendo uma solução do lado do servidor com python. Aqui está a essência disso. Você verifica os dados exif para obter orientação, depois gira a imagem de acordo e salva novamente.

Preferimos esta solução em vez de soluções do lado do cliente, pois não requer o carregamento de bibliotecas extras do lado do cliente, e essa operação deve ocorrer apenas uma vez no upload do arquivo.

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
fonte

3

Isso acontece porque a orientação original da imagem não é a que vemos no visualizador de imagens. Nesses casos, a imagem é exibida verticalmente para nós no visualizador de imagens, mas na horizontal é real.

Para resolver isso, faça o seguinte:

Abra a imagem no editor de imagens como paint (no windows) ou ImageMagick (no linux).
Gire a imagem para a esquerda / direita.
Salve a imagem.

Isso deve resolver o problema permanentemente.

— Yuvraj Patil
fonte

1

Uma maneira fácil de corrigir o problema, sem a codificação, é usar a função Salvar para exportação na Web do Photoshop. Na caixa de diálogo, pode-se optar por remover todos ou a maioria dos dados EXIF de uma imagem. Normalmente, mantenho os direitos autorais e informações de contato. Além disso, como as imagens provenientes diretamente de uma câmera digital são muito grandes para exibição na Web, é uma boa ideia reduzi-las através de Salvar na Web de qualquer maneira. Para aqueles que não conhecem o Photoshop, não tenho dúvidas de que existem recursos on-line para redimensionar uma imagem e remover todos os dados EXIF desnecessários.

— AlGator
fonte

4

Mas se você estiver desenvolvendo um aplicativo em que os usuários possam escolher qualquer imagem a ser carregada, como usar o Photoshop nesse caso? :)

— The Lazy Log

1

Eu acho que existem alguns problemas na orientação da imagem de correção automática do navegador, por exemplo, se eu visitar a imagem diretamente, ela mostra a orientação correta, mas mostra a orientação incorreta em algumas páginas html de saídas.

— Kai Zou
fonte

-19

Use estilo externo. na folha html, forneça o nome da classe para a tag. na folha de estilo, use o operador de ponto precedido pelo nome da classe e, em seguida, escreva o código a seguir

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

— msd
fonte

Não é uma solução generalizada. Vai trabalhar especificamente sobre a imagem fornecida em questão

— th3pirat3