CODEWITHSUNDEEP
javascriptphphtmlhtml2canvas
user4540334
user4540334

Reputation:

html2canvas - error - object HTMLCanvasElement

I need to print the div using javascript.. The content of this div is barcode which is generated.. Using normal approach of printing div element doesn't work because the barcode image is generated by php file and doesn't appear in printing page.. so I decided to use html2canvas approach to 'render' the div and then print it.. 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 doesn't contain the content of div I need to print.. I get this error: [object HTMLCanvasElement]

Thanks for attention..

Upvotes: 5

Views: 7068

Answers (1)

webketje
webketje

Reputation: 11006

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 (it's a string metthod), and the output [HTMLCanvasElement] is how JS converted the DOM element to a string (it's not an error). If the popup is on the same domain as the parent window, you should be able to do mywindow.document.appendChild(canvas). Else if it's not a possible workaround is to, - in your onrendered callback -, do:

var canvasData = canvas.toDataURL();
mywindow.document.write('<img src="' + canvasData + '">');

Upvotes: 7

Related Questions