Transforming string text into picture

Question

Hello, I’m developing an app and I need to, at a certain point, take a string that contains data from a voucher and turn this text into a voucher image and then share this image via Whatsapp. I never did something like this and after some time researching I did not reach a satisfactory solution. The proof would have the format below:

"##########################
Central Jogos
##########################
Gambler
Amount Bet: R$5
Return value: R$6.15
Bet Date: 19/02/2017 15:07
Qty. Games: 1
-----------------------------------------
Vasco X Flamengo
Tie: 1.23
10/03/2017 15:30
=======================
Cambista: Cambista Teste
Tel.: [phone]"

Answer 1

You can use the element canvas to generate the image, as in the example below:

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>

Note: When executing the above code, the console output will be generated in the format data:image/png;base64,.... To test, you can copy this message and paste it directly into the browser. If all goes well, you will see the receipt image in PNG format.

Basically it is a list of messages, which can be generated dynamically. The element is recovered canvas and your context, defined the source Courier New 12px, because it is monospace and generates a better result visually, traversed the list and added to the canvas in position (0, y), where y is incremented by 18 to maintain a small spacing between lines. In the end, the value of context.canvas.toDataURL that is nothing more than the generated image.

However, I owe you how to send it by Whatsapp, because this is out of my knowledge. If someone knows and wants to edit the answer, feel free.

Answer 2

The first part of my question was answered by Anderson, already the part of sending Base64 to Whatsapp I found the solution with the phonegap plugin Social Sharing. You can share PDF, image, links, etc.