1

Olá, eu estou desenvolvendo um app e preciso, em certo ponto, pegar uma string que contém dados de um comprovante e transformar esse texto em uma imagem do comprovante e em seguida compartilhar essa imagem via whatsapp. Eu nunca fiz algo do tipo e depois de algum tempo pesquisando não cheguei à uma solução satisfatória. O comprovante teria o formato abaixo:

"##########################
Central Jogos
##########################
Apostador: test
Valor Apostado: R$5
Valor Retorno: R$6.15
Data Aposta: 19/02/2017 15:07
Qtd. Jogos: 1
-----------------------------------------
Vasco X Flamengo
Empate: 1.23
10/03/2017 15:30
=======================
Cambista: Cambista Teste
Telefone: (82) 9977-8877"

2 Respostas 2

3

Você pode utilizar o elemento canvas para gerar a imagem, como no exemplo abaixo:

var canvas = document.getElementById("receipt");
var context = canvas.getContext("2d");

const messages = [
  "################################",
  "Central Jogos",
  "################################",
  "Apostador: test",
  "Valor apostado: R$ 5,00",
  "Valor de retorno: R$ 6,15",
  "Data da aposta: 19/02/2017 15:07",
  "Quantidade de jogos: 1",
  "--------------------------------",
  "Vasco X Flamengo",
  "Empate: 1.23",
  "10/03/2017 15:30",
  "================================",
  "Cambista: Cambista Teste",
  "Telefone: (82) 9977-8877"
];

context.font = "12px Courier new";

y = 12;
for (var i in messages) {
  context.fillText(messages[i], 0, y);
  y += 18;
}

document.getElementById("result").src = context.canvas.toDataURL();
h1 {
  font-size: 16px
}

div {
  float: left;
  padding: 20px;
}
<div>
  <h1>Canvas:</h1>
  <canvas id="receipt" width="230" height="270"></canvas>
</div>
<div>
  <h1>Resultado:</h1>
  <img id="result" alt="Receipt" />
</div>

Nota: Ao executar o código acima, será gerada a saída no console no formato data:image/png;base64,.... Para testar, você pode copiar esta mensagem e colar diretamente no navegador. Se tudo deu certo, verá a imagem do recibo em formato PNG.

Basicamente é uma lista com as mensagens, que pode ser gerada dinamicamente. É recuperado o elemento canvas e seu context, definido a fonte Courier New 12px, porque é monospace e gera um resultado melhor visualmente, percorrido a lista e adicionado ao canvas na posição (0, y), onde y é incrementado em 18 para manter um pequeno espaçamento entre as linhas. No final, recupera-se o valor de context.canvas.toDataURL que nada mais é que a imagem gerada.

Porém, fico te devendo como enviá-la pelo WhatsApp, pois isso já saiu do meu conhecimento. Se alguém souber e quiser editar a resposta, fique a vontade.

1
  • Muito obrigado mesmo pela resposta, vou tentar implementar no app e dou o retorno mas testando no navegador já vi que funciona perfeitamente. 20/02/2017 às 2:13
0

A primeira parte da minha pergunta foi respondida pelo Anderson, já a parte de enviar o base64 pra o WhatsApp eu achei a solução com o plugin phonegap Social Sharing. Dá pra fazer compartilhamento de PDF, imagem, links e etc.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .