0

Boa tarde Devs o/

Estou com uma dúvida, preciso inserir uma imagem ao <canvas>. Mas isso não é tudo, eu estou montando um sistema de criação de posts para Instagram, então tenho diversos templates no banco de dados, preciso colocar ele dentro do <canvas> e até o momento eu já coloquei a foto do template, do usuário, nome do mesmo e cargo. Chegando neste resultado:

inserir a descrição da imagem aqui

Podemos ver que está tudo indo bem, mas o real problema está na seleção do funcionário que o usuário deseja fazer o post. No momento do print o nome selecionado é Bruna, mas nenhuma foto foi carregada. E afirmo que o problema não está no PHP.

Não coloquei as informações de conexão com o banco e tabela, pois estou resolvendo o problema na produção

header("Content-type: image/gif");
if($row=mysqli_fetch_object($result)) { 
   echo "
       var canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');
                    
       img4 = new Image(115,115)
       img4.src = 'data:image/png;base64,'
       img4.onload = function(){
          context.drawImage(img4, 201, 128, img4.width, img4.height)
          context.font = '11px Montserrat';
          context.fillText('".$row->nome_consultor."', 222, 258);
       } 
    "
}

Ao ir no console e colocar img4, ele retorna a tag img com todos os atributos que solicitei para o PHP, porém o html não está 'mostrando' o conteúdo inserido no <canvas>.

Alguém sabe se o canvas tem limitações pós carregamento? Ou realmente tem algum problema de syntax?

Desde já agradeço <3

1 Resposta 1

0

Olá. Parece que seu código tem confusão entre backend e frontend.

Você está informando que a saída do seu PHP será um gif:

header("Content-type: image/gif");

Porém você está escrevendo código JS:

echo "
       var canvas = document.getElementById('canvas');
       context = canvas.getContext('2d');
                    
       img4 = new Image(115,115)
       img4.src = 'data:image/png;base64,'
       img4.onload = function(){
          context.drawImage(img4, 201, 128, img4.width, img4.height)
          context.font = '11px Montserrat';
          context.fillText('".$row->nome_consultor."', 222, 258);
       } 
    "

Eu sinceramente não consegui compreender muito o que você quer fazer, mas posso afirmar com certeza que ou seu header está errado.

8
  • Vamos lá, faz todo sentido o que você falou, porém eu faço uma solicitação ajax para recuperar a imagem do template. Após isso ele coloca tudo que eu preciso pra deixar o template pronto, como foi visto na primeira imagem, após isso o usuário precisa selecionar o funcionário que ela deseja e então no onChange do select eu realizo outra solicitação ajax para me retornar a imagem do funcionário selecionado e até então era pra adicionar a imagem juntamente do nome para o contexto do canvas. Todo o JS que está 'dentro' do PHP será adicionado em uma tag <script>
    – user179947
    Commented 15/07/2020 às 19:41
  • Ou seja, quando ele coloca o conteúdo dentro do canvas ele não fica visível, porem existe! Quando recupero a variavel img4 no console ele retorna exatamente o img com os parâmetros definidos pelo PHP, como src, width e height, mas por algum motivo ele não existe no DOM do canvas
    – user179947
    Commented 15/07/2020 às 19:44
  • Se você vai retornar um JS que deve ser executado ao ser respondido ao objeto do ajax, você deve definir o mime-type correto no header, que se não me engano é text/javascript. Depois, ao receber a resposta, usa o método eval(). Ficaria eval(responseText).
    – Tiago Luz
    Commented 15/07/2020 às 19:44
  • Os outros header estão com esse mesmo formato e ambos mostram a imagem que preciso, porém em algum momento o DOM do canvas perde o img4 e coloca apenas o template, foto do usuário, nome e cargo do mesmo.
    – user179947
    Commented 15/07/2020 às 19:48
  • 1
    Não tenho certeza que tenho 100% de razão, mas foi bem o que eu disse, eu passei os mesmos parâmetros para o ajax que solicita a foto do funcionário, o que ele faz é simples, busca o template novamente, (insere a foto do usuário, nome e cargo, "ALOCADO NA $_SESSION") e pronto, tudo certo como imaginava! Agradeço sua ajuda de qualquer forma, realmente precisava ouvir o que você falou para desistir do que eu estava fazendo e refazer tudo novamente
    – user179947
    Commented 15/07/2020 às 20:02

Você deve fazer log-in para responder a esta pergunta.