While trying to print a div containing a component, by using document.getElementById('div-to-print').innerHTML, the graphic data in the canvas is not getting copied over.
I'm currently using a work around, where I copy the canvas data over, converting to an img tag with a toDataURL.
I was thinking, if ng-qrcode could insert a img tag, instead of a canvas, with a flag. It would make things a lot easier.
Example code:
let pageContents = document.createElement('div');
pageContents.innerHTML = document.getElementById(divId).innerHTML;
const canvas = Array.from(document.getElementsByTagName('canvas'));
const canvasClone = Array.from(pageContents.getElementsByTagName('canvas'))
for (var i = 0; i < canvas.length; i++) {
let img = document.createElement('img');
img.className = canvas[i].className;
img.style.cssText = canvas[i].getAttribute('style');
img.src = canvas[i].toDataURL();
canvasClone[i].parentNode.replaceChild(img, canvasClone[i]);
};
While trying to print a div containing a component, by using document.getElementById('div-to-print').innerHTML, the graphic data in the canvas is not getting copied over.
I'm currently using a work around, where I copy the canvas data over, converting to an img tag with a toDataURL.
I was thinking, if ng-qrcode could insert a img tag, instead of a canvas, with a flag. It would make things a lot easier.
Example code: