Html2canvas - error - HTMLCanvasElement object
I need to print a div using javascript. The content of this div is the barcode that is being generated .. Using the normal print div element approach does not work because the barcode image is generated by the php file and is not displayed on the print page. So I decided to use the approach html2canvas
to "render" the div and then print it out., Here is my code:
HTML:
<div id="source" onClick="capture()"> Some content and img of barcode </div>
JavaScript:
function capture() {
html2canvas( [ document.getElementById('source') ], {
onrendered: function (canvas) {
var mywindow = window.open('', 'my div', 'height=400,width=1000');
mywindow.document.write('<html><head><title>Print Div:</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(canvas);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
});
}
mywindow opens but does not contain the content of the div that I need to print. I am getting this error:[object HTMLCanvasElement]
Thanks for your attention.
source to share
From the html2canvas
docs:
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
}
canvas
is a DOM element. You cannot document.write
DOM elements (this is a metthod string) and the output [HTMLCanvasElement]
is how JS converted the DOM element to a string (this is not an error). If the popup is on the same domain as the parent window, you can do mywindow.document.appendChild(canvas)
. If it isn't, maybe this is a possible workaround - in your callback, onrendered
do:
var canvasData = canvas.toDataURL();
mywindow.document.write('<img src="' + canvasData + '">');
source to share