Convert string to image and send it to WhatsApp

Question

I'm developing a phonegap app and I need it to be able to convert a string that will be in a localStorage variable into a PNG image and share it on WhatsApp Messenger. I've never done somethin' like that before. The idea of using canvas to generate the Image came to mind but I have no idea how to work it out from there and sent the data I've got from the dataToUrl function to WhatsApp. If someone can give me an idea on how to do it or an alternative way to do it I'd really appreciate. The string will be something like shown below:

"##########################
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"

Answer 1

I just found this cordova plugin that allows you to share images, links, base64 and other things not just on WhatsApp Messenger but also on Facebook, Twitter and a bunch of other apps. I think it might be extremely helpfull. Thank you guys that answered me.

SocialShare GitHub Repo

Answer 2

1. Convert your image to Base64 String like these image uri to Base64
2. Draw an image canvas using this Base64 string Base64 png data to html5 canvas
3. Reconvert Base64 string to Image using HTML5 Canvas to PNG File
4. you can also save the canvas image file by using reimg library
5. just save and share the saved image by step 4 on button click

Answer 3

You can generate a base64 string from a <canvas>.

• You need to use the <canvas> element where your image is going to be stored, basically you need to load your image into the canvas.
• Then you can use the toDataURL to get the string on base64 format.