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.