Html2canvas converts only the visible area of ​​the window

Question

I am using the html2canvas plugin for this.

I am currently using this code.

html2canvas($("#chartDiv"), { onrendered: function (canvas) { var win = window.open(); win.document.write("<br><img src='" + canvas.toDataURL() + "'/>"); win.print(); } }); 

when I convert a div to canvas, only the visible part of the window turns into canvas.

I need to find a solution in which I can print a div to many pages if the div is above the window size.

Thanks in advance

Answer 1

It seems that the only option you have is to change the page to see how you want the image to look before rendering.

I ran into the same problem when using html2canvas, and this is one of the reasons why I am writing methods that now draw what I want for the canvas.

Maybe see this

Answer 2

I had the same problem to take a Bootstrap Modal image. The trick that worked for me was that I added a temporary div view with visibility:hidden at the end of the body, for example, for example:

 <div id="TempDataDiv" style="visibility:hidden"></div> 

Then, before calling html2canvas I added the contents to this TempDataDiv and deleted the contents in the onrendered function, as shown below (twice to avoid cuts at the edges):

 $("#TempDataDiv").html($("#chartDiv").html() + $("#chartDiv").html()); var useHeight = $("#chartDiv").prop('scrollHeight'); html2canvas($("#chartDiv"), { height: useHeight, onrendered: function(canvas) { imageData = canvas.toDataURL(); $("#TempDataDiv").html(""); var win = window.open(); win.document.write("<br><img src='" + imageData + "'/>"); win.print(); } }); 

I hacked a bit, but worked fine for me.