Use html2canvas to capture screen and print the image using weappbridge - html2canvas

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>