How to convert a QR code object from whatsapp web API to display in browser?

Question

I am using whatsapp-web-js with electron and nodeJS. The code seems to be running fine, I am getting a QR code object in the console.

Question is now, how do I get it from the console to display in the browser window?

Currently it looks like this:

2@PZ0Jyz7rHCXZNd+YO4CQNqH4wyBNSfe9nvaBX5iDRznIge9R5l5Q9bc/HAWdyBX9Vw0hlM5ah6qzSg==,jeZP7wCKb7yHxDNVFoZxVwz/sNyGHSdRA5+40LuJdDY=,uvsK+Vkh5GT/hYEn8JtjhXd5HVFy5LNXURjTCzQhjW0=,EO4NKNizL7glVU8uMnG+nvPRdA2/ObE8Ay9Zh/EoXLo=

I have tried:

client.on('qr', (qr) => {
console.log('QR RECEIVED', qr);
var qrCanvas = document.getElementById('qrcode');
var ctx = qrCanvas.GetContext('2d');
var img = new Image;
img.onload = function() 
{
    ctx.drawImage(img,0,0,img.width,img.height);
}
img.src = qr;

});

But this does not display anything. I did see the qrcode-terminal module, but I want it to display in the electron window, not the terminal.

Also saw different qrcode generators, but they all only seem to generate qrcodes from text, not from an object as I have.

Answer 1

From what I understand you want to paint the whatsapp qr on a canvas.
Did you try the qrcode module?

has a toCanvas() method, here is a small example following your code:

import QRCode from 'qrcode'

client.on('qr', (qr) => {
  const canvas = // ...
  QRCode.toCanvas(canvas, qr, (error) => {
    // ...
  })
})