#how to print a qr code ( canva ) ?

8 messages · Page 1 of 1 (latest)

brittle shoal
#

hello , im trying to print a html component. When im printing i see all elements without the qr code. By doing some research i found the because the qrcode is a canva and i gotta convert the ccanva to a image. I did it with but convertion didn't work.

image : what i have when i print ( qrcode dont appear and the barcode does )

this is the function

printEticket(printContents) {
        let printContents, popupWin;
        // printContents = document.getElementById(ticket).innerHTML.toString();,
        popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
        popupWin.document.open();
        popupWin.document.write(`
        <html>
          <head>
            <title>LOGIDOO</title>
            <meta name="viewport" content="width=10000, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <style> </style>
          </head>
          <body>
            ${printContents.nativeElement.innerHTML}
          </body>
          <script>
            function convertCanvasToImage() {
              var canvasElements = document.querySelectorAll('canvas');
              canvasElements.forEach(function(canvas, index) {
                var img = new Image();
                img.src = canvas.toDataURL();
                img.setAttribute('style', 'display:block; margin:auto;');
                canvas.parentNode.replaceChild(img, canvas);
              });
            }
            window.onload = function() {
              convertCanvasToImage();
              window.print();
              window.onafterprint = function() {
                window.close();
              };
            };
          </script>
        </html>
      `);
    
        popupWin.document.close();
    }
📎 message.txt image.png
hexed obsidianBOT
#

Hi @brittle shoal, please do not post pictures/screenshots of code (especially photos of a physical screen). Screenshots are more difficult to read compared to code in a codeblock, and they do not allow people answering to quickly copy and adjust your code to provide you with an answer.

For copy/pasting code in a discord post, you can use the following snippet to have your code placed in a codeblock with syntax highlighting. Replace ts with the language you are copying (i.e. html, js, css, etc)

```ts
// your code goes here
```

See #how-to-get-help for more tips on how to ask code related questions in this server.

sharp birch
#

Where does <qrcode> element come from?

brittle shoal
sharp birch
#

It looks like you should create a copy as image of the canvas for printing.
If you need further help, please provide a minimal stackblitz reproduction.

last hornet
sharp birch
#

True. I totally missed that.

brittle shoal