Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
leonardo23costa

Imagem rotacionando automaticamente

Pergunta

Galera, estou com um probleminha no meu HTML/CSS... Algumas imagens, geralmente de tamanho grande estão rotacionando sozinhas...

Segue em anexo uma imagem para vocês entenderem melhor.

 

Observem que as duas primeiras imagens estão na posição correta, porém a terceira e a quarta estão viradas... sendo que quando faço o upload elas estão na posição correta...

 

Segue meu fonte:

<div id="usr-image" class="img-thumbnail img-responsive small-spacer" style="width:100%; height:200px; background-image:url(foto-perfil/'.$fetch['id'].'-profile.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; cursor:pointer;">
  <p style="color:#FFF; font-size:14px; margin-top:165px;"><b>'.$nome[0].', '.$idade.'</b></p>
</div>

 

Fico no aguardo por favor, abs.

 

Sh3UL.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

6 respostas a esta questão

Recommended Posts

Leonardo 

 

Lá está o que eu te falei até porque se tu reparares a imagem que é mostrada na página web a sua orientação está óptima, se tua rodares ela vai ficar deitada e ai ficará boa certo ? porque ? porque foi tirada com o telemóvel deitado ....

 

Estás a perceber ? quando viras a camera do telemóvel a orientação da imagem é alterada, se tirares uma com o telemóvel na vertical e outra com ele na horizontal a orientação da foto muda completamente...

 

Porem tens uma forma de resolver o problema em php quando fazes o upload da foto..

 

Fazes o upload da foto para uma base de dados ? ou na base de dados so guardas o link ?

 

A solução em php é esta :

<?php
$image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name']));
$exif = exif_read_data($_FILES['image_upload']['tmp_name']);
if(!empty($exif['Orientation'])) {
    switch($exif['Orientation']) {
        case 8:
            $image = imagerotate($image,90,0);
            break;
        case 3:
            $image = imagerotate($image,180,0);
            break;
        case 6:
            $image = imagerotate($image,-90,0);
            break;
    }
}
// $image now contains a resource with the image oriented correctly
?>

Podes encontrar mais informações no site oficial ->http://php.net/manual/en/function.exif-read-data.php

 

Se for em javaScipt vais precisar de utilizar uma biblioteca, é mais fácil fazer em php ...

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Leonardo

 

Acredito que  que esteja a acontecer é que as imagens que estas a fazer upload não tenham a orientação EXIF definida, e dai o navegador interpretar isso e girar a imagem automaticamente Se essas fotografias foram tiradas com camara do telemovel é bastante provavelmente que seja este o teu problema... 

 

Podes verificar isso neste link abaixo 

http://exifdata.com/index.php

 

Podes utilizar este link para "reparares" a tua imagem ->

https://www.thexifer.net/

 

Ou então se não quiseres ter tanto trabalho podes forçar a orientação da imagem no css

<style> 
div {
    /* Vamos então rotacionar a div */
    -ms-transform: rotate(0deg); /* Para funcionar o IE9*/
    -webkit-transform: rotate(0deg); /* Para os restantes navegadores firefox, Chrome, Safari, Opera etc... */
    transform: rotate(0deg);
}
</style>

O que esse código faz é transformar todas as imagens que estão dentro de uma div deixando-as visíveis na página web com 0 graus de rotação ....

 

Espero que tenha ajudado 

 

 

Abraço

 

Vítor Mendes

 

 

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa Vitor, obrigado pelas dicas... então essas imagens foram tiradas do meu celular mesmo, inclusive notei que a altura delas são maiores que a largura. Tentei usar aquele css que você mandou mas não deu certo, as imagens continuam rotacionadas... precisava que meu app fizesse isso automático porque senão acho que vários usuários terão esse problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Humm esquisito isso!! 

 

Experimenta com outras imagens vai mesmo ao google imagens buscar imagens e mete só para tirar uma duvida com que estou ok ?

 

class="img-thumbnail img-responsive small-spacer"   -> foste tu que fizeste esta classe

O que está nessa classe? 

 

Eu acho que vais ter de fazer uma alteração ao teu código e passar a utilizar a tag img ...

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não então, esta classe é do meu template... tentei utilizar a tag img mas ocorre a mesma coisa. E são só as imagens que eu seleciono do celular que da problema... estava pensando aqui, será que na hora que estou fazendo o upload eu poderia configurar algo?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por luiz monteiro
      Olá, tudo bem?
       
      Estou melhorando meu conhecimento em php e mysql e, me deparei com o seguinte. A tabela da base de dados tem um campo do tipo varchar(8) o qual armazena números. Eu não posso alterar o tipo desse campo. O que preciso é fazer um select para retornar o números que contenham zeros a direita ou a esquerda.
      O que tentei até agora
       
      Ex1
      $busca = $conexao->prepare("select campo form tabela where (campo = :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form']);
       
      Se a direita da string $_REQUEST['campo_form'] termina ou inicia com zero ou zeros, a busca retorna vazio.
      Inseri dados numéricos, da seguinte maneira para testar: 01234567;  12345670: 12345678: 12340000... entre outros nessa coluna. Todos os valores que não terminam ou não iniciam com zero ou zeros, o select funciona.
       
       
      Ex2
      $busca = $conexao->prepare("select campo form tabela where (campo = 0340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex3
      $busca = $conexao->prepare("select campo form tabela where (campo = '02340001' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex4
      $busca = $conexao->prepare("select campo form tabela where (campo like 2340000) ");
      Esse número está cadastrado, mas não retorna.
       
      Ex5
      $busca = $conexao->prepare("select campo form tabela where (campo like '12340000') ");
      Esse número está cadastrado, mas não retorna.
       
      Ex6
      $busca = $conexao->prepare("select campo form tabela where (campo like '"12340000"' ) ");
      Esse número está cadastrado, mas não retorna.
       
       
      Ex7
      $busca = $conexao->prepare("select campo form tabela where (campo like :campo) ");
      $busca->bindParam('campo', $_REQUEST['campo_form'])
      Não retorna dados.
       
      O  $_REQUEST['campo_form'] é envio via AJAX de um formulário. 
      Usei o gettype para verificar o post, e ele retorna string.
      Fiz uma busca com número 12345678 para verificar o que o select retorna, e também retrona como string.
       
      Esse tipo de varchar foi usado porque os números que serão gravados nesse campo,  terão zeros a direita ou na esquerda. Os tipos number do mysql não gravam zeros, então estou usando esse. O problema é a busca.
      Agradeço desde já.
       
       
    • Por daemon
      Boa tarde,
       
      Eu tenho uma rotina que faz uma leitura do arquivo .xml de vários sites.

      Eu consigo pegar o tópico e a descrição, e mostrar a imagem que esta na pagina do link.
      Para isso utilizo esta função:
      function getPreviewImage($url) { // Obter o conteúdo da página $html = file_get_contents($url); // Criar um novo objeto DOMDocument $doc = new DOMDocument(); @$doc->loadHTML($html); // Procurar pela tag meta og:image $tags = $doc->getElementsByTagName('meta'); foreach ($tags as $tag) { if ($tag->getAttribute('property') == 'og:image') { return $tag->getAttribute('content'); } } // Se não encontrar og:image, procurar pela primeira imagem na página $tags = $doc->getElementsByTagName('img'); if ($tags->length > 0) { return $tags->item(0)->getAttribute('src'); } // Se não encontrar nenhuma imagem, retornar null return null; } // Uso: $url = "https://example.com/article"; $imageUrl = getPreviewImage($url); if ($imageUrl) { echo "<img src='$imageUrl' alt='Preview'>"; } else { echo "Nenhuma imagem encontrada"; }  
      Mas estou com um problema, esta funcão funciona quando coloco em uma pagina de teste.php. Preciso mostrar em uma página inicial diversas fotos de todos os links. (No caso acima só funciona 1).
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.