I am working on FrappeFramework 'ERPNext' customization.

I need to display QR code in sales invoice and also show it in print invoice.

Current flawed solution: Right now, I fetch an encoded string from server side. On the client side, I have a QR image HTML field as such:

Then in js, I use a js library ‘QRious’ to render HTML into that field and the QR code is displayed.

function generateQRCode(base64) {
  var qr = new QRious({
    element: document.getElementById("qr_code"),
    size: 200,
    value: "",
  });
  var qrtext = base64;
  qr.set({
    foreground: "black",
    size: 200,
    value: qrtext,
    mime: 'image/png'
  });
}

However, when trying to print the invoice, the QR code does not appear and I cannot figure out how to hook into the print page to render the image there.

My question is:

Can I do this in a way that ERPNext will save the rendered image without me having to regenerate it every time from encoded string.

If not, how do I hook into the print page to manually render the QR code over there. (encoded string is available on print page)

P.S. I can also fetch an rgb/gray array if that helps.