Rotacionar Imagem - PHP+AJAX

18 de setembro de 2018 8 respostas

Danitecnologia 18 de setembro de 2018

Boa tarde pessoal.
Eu tenho uma galeria de imagens onde preciso rotacionar a imagem, salvar a imagem no servidor e mostrar ao usuário a imagem virada.
Para salvar no servidor uso o PHP, sem problemas.
Para fazer de forma assíncrona uso o Ajax.
A questão é que não tou conseguindo fazer isso.
Dependo de ter um botão submit para atualizar a página a mostrar o resultado.

function rotaciona(id){
var img = document.getElementById("imgGaleria");
jQuery.ajax({
    data: {gal_id: id},
    url: action_fotos + "rotate.php",
    type: 'POST',
    error: function (resposta) {
        msg.empty().html(resposta);
    },
    success: function (resposta) {
        img.src = "";
        img.src = resposta;    //aqui eu carrego novamente a imagem, porém ele nem vira, apenas qdo atualizo a página tendo que usar submit.
    }
});

}

8 Respostas

rodevops 18 de set. de 2018

Talvez ajude…

http://php.net/manual/pt_BR/function.imagerotate.php

Danitecnologia 18 de set. de 2018

Então…o PHP acredito que ta correto, pois quando vejo na pasta a imagem esta virada.
vou postar uma parte do código:

$rot->rotateImage();
   return $rot->save("../../../../../uploads/{$cover}");
   $this->Result = "../../../../../uploads/{$cover}";

A questão é o código em Ajax.
Preciso retornar a imagem atualizada.
Tentei com a função que tenho para atualizar a galeria, a mesma que uso quando deleto, edito a legenda e envio imagem.
Porém com o rotacionar não funcionou.
Quando dou um alert na resposta do ajax, retorna a url da imagem.
Tenho que atualizar a div da imagem ?

rodevops 18 de set. de 2018

O ajax está aparentemente tudo certo, como vc está o php mandar os dados para o ajax? Abaixo dessa linha coloque:

img.src = resposta;
 console.log(resposta);

E use F12 do navegador na aba console para ver o resultado…

Danitecnologia 18 de set. de 2018

fonte.php (1,9 KB)

No caso volta a url da imagem.
Anexei uma parte de cada código.
Acredito que estou errando alguma coisa.
Agradeço se puder me ajudar.

rodevops 18 de set. de 2018

Bom vamos lá, esse trecho:

echo "../../../../../uploads/{$cover}";
return $rot->save("../../../../../uploads/{$cover}");

Na verdade quando se interage com ajax só precisa do echo, qual o resultado do método save? uma string? Se sim tente isso:

echo $rot->save("../../../../../uploads/{$cover}");

Ou simplesmente mude a ordem…

$rot->save("../../../../../uploads/{$cover}");
echo "../../../../../uploads/{$cover}";

Pra que vc retorna esse save?
Mudando assim veja o console log que te mostrei para ver se mostra a url corretamente…

Só para constar, esse arquivo rotate.php é separado desse ajax certo?

E mais uma coisa, essa variável action_fotos no js, não vejo ela criada em lugar nenhum:

url: action_fotos + "rotate.php",

Seu código não mostra nenhum erro? (use F12 console para ver isso é importante e já vai te treinando para ajustar seu código e identificar erros facilmente…)

Danitecnologia 19 de set. de 2018

Rapaz, é uma coisa muito louca que ta ocorrendo: a imagem ta virada mais na verdade não consigo visualiza-la invertida…como se fosse cache!
Fiz diversos testes somente com a tag img, mais não consegui (ainda).
https://jsfiddle.net/50ochbt1/5/
Aqui a imagem deveria estar virada, mais não ta.
Porém se inspecionar e pedir para abrir em nova aba aparece virada.
O código ta correto então, o problema é outro.
A imagem vira mais não consigo visualizar.
Obrigada pela força!

rodevops 19 de set. de 2018

A pagina que tem ajax é .php?

Se sim, vc pode tentar burlar o cache com um coringa assim:

jQuery.ajax({
        data: {gal_id: id, joker: "<?php echo time(); ?>"},
        url: action_fotos + "rotate.php",
        type: 'GET',
        error: function (resposta) {
            msg_gal.empty().html(resposta);
        },
        success: function (resposta) {
            img.src = resposta;
        }
    });

Perceba que mudei o método pra get já que vc só passa um id pra rotacionar…

Ou na página que responde o ajax (rotate.php) no topo dela você pode usar a função header para não guardar cache:

https://paulund.co.uk/disable-http-cache-with-php

Boa sorte!

Danitecnologia 29 de set. de 2018 1 like

Obrigadão rodevops!
Sua resposta me deu uma luz…e acabei fazendo de uma maneira melhor (eu acho)…rs
Eu coloquei um campo no bd - update_image com o time, e toda vez que rotaciono, atualizo esta data_hora ai na url da imagem uso o parâmetro - quando tem senão é null.
Função header não funcionou.
Valeu msm!!!

Criado 18 de setembro de 2018

Ultima resposta 29 de set. de 2018

Respostas 8

Participantes 2

8 Respostas

Topicos relacionados