HTML2Canvas converts crowded content into image

Question

I have a div that is pretty crowded. This is mainly a large organizational chart. What I want to do is export all the div content, not the visible part, using the html2canvas library, but I have not been able to achieve it yet. The following code snippet does not display the full content. Is there any way to achieve this?

function export(){ html2canvas( [ document.getElementById('diagram') ], { onrendered: function(canvas) { var dataUrl = canvas.toDataURL(); window.open(dataUrl, "toDataURL() image", "width=800, height=800"); //Canvas2Image.saveAsPNG(canvas); } }); } 

I use the BasicPrimitives library to create organization charts. It takes a div and inserts all the elements into it. Since my chart is moderately large, it overflows from its container. Xhtml code is as follows:

 <rich:panel style="float: left; width: 100%;"> <div style="float: left; height:600px; margin-left: 1%; width: 19%; border-style: dotted; border-width:1px;"> Some irrelevant content </div> <div id="diagram" class='diagram' style="float: right; height:600px; width: 59%; border-style: dotted; border-width:1px;"> This is the div all charts are dynamically inserted </div> <div style="float: left; height:600px; margin-left: 1%; width: 19%; border-style: dotted; border-width:1px;"> Some more irrelevant content </div> </rich:panel> 

Answer 1

I don’t know if there is a simple possibility in html2canvas for this (i.e. an option so that all overflows are displayed), but the workaround may be to set the parent property of the overflow of the chart element visible when your export function is called, and then returns to the hidden html2canvas callback again, so that the user has the minimum time to perceive it:

 function export(){ document.getElementById('diagram').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly. html2canvas( [ document.getElementById('diagram') ], { onrendered: function(canvas) { document.getElementById('diagram').parentNode.style.overflow = 'hidden'; var dataUrl = canvas.toDataURL(); window.open(dataUrl, "toDataURL() image", "width=800, height=800"); //Canvas2Image.saveAsPNG(canvas); } }); } 

Answer 2

Try dom-to-image , it works better for me, since I have to set a certain size, and show the element that is hiding for some screen size:

 function convertCanvasAndSend(idElement, nameImage) { var element = document.getElementById(idElement); var styleOrig = element.getAttribute("style"); element.setAttribute("style", "width: 1400px; height: 480px;"); element.querySelector("ANY_HIDDEN_YOU NEED").setAttribute("style", "display: block;"); domtoimage.toBlob(element) .then(function (blob) { window.saveAs(blob, nameImage + '.png'); element.setAttribute("style", styleOrig); element.querySelector("ANY_HIDDEN_YOU NEED").setAttribute("style", styleOrigInnDiv); }); 

}