Use html2canvas to capture screen and print the image using weappbridge

Question

I am using the web hardware bridge by imTigger. My goal is to do as silent printing directly from a webpage without invoking the system dialog.

Here is the web hardware bridge project: https://github.com/imTigger/webapp-hardware-bridge and I am able to map my printers and select and print directly to them pdfs and raw pdf using javascript like in many examples

I am also able to use html2canvas and capture the screen and append the image to the html and show it in the browser console.

Now I am trying to send the image to the printer using both codes and I get an ampty image. The printer lights up but no image is printed. So I print to pdf using cutepdf so I can see what is printed and I get a blank pdf page.

Here is my code:

<script>

html2canvas(document.querySelector("#capture")).then(
    canvas => {

        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        console.log(image);
        printService.submit({
                'type': 'INVOICE',
                'raw_content':  image
            }); 
}); 
</script>

I also tried this with no success

        var image = canvas.toDataURL("image/png");

thanks!

Answer 1

I found the solution,

needed to remove data:image/png;base64 from the data and send the data as a file with the the png type 'url': 'file.png'.

This code works:

<script> 
html2canvas(document.querySelector("#capture")).then(
    canvas => {
        var image = canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
        console.log(image);
        printService.submit({
                'type': 'INVOICE',
                'url': 'file.png',
                'file_content':  image
            }); 
}); 
</script>