HTML2Canvas converting overflowed content to image

Question

I have a div which is pretty overflowed. It basically includes a big organization chart. What I want to do is exporting whole content of div rather than visible part with html2canvas library but I couldn't achieve it so far. Following piece of code doesn't render full content. Is there a way to achieve it?

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 am using BasicPrimitives library to generate organization charts. It takes a div and insert all elements to it. Since my chart is moderately big, 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>

score 19 · Accepted Answer · answered Aug 02 '13 at 10:01

I don't know if there's a straightforward option in html2canvas to do this (i.e. an option to set all overflow to visible) but a roundabout way might be to set the parent of the diagram element's overflow property to visible when your export function is called, then set it back to hidden again on html2canvas' onrendered callback so that the user has minimal 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);
        }
     });
}

Thank you for your brilliant idea! I managed to get full image. However, I did it slightly different. I directly changed the containers size (an absurd number for now, however actual size can be calculated)and then change back to original size. — Cengiz Kandemir, Aug 02 '13 at 11:00
The widget now supports AutoSize option, so it will expand its size to show all contents automatically. — Basic Primitives Support, Mar 03 '16 at 15:27

Condemateguadua · Answer 2 · 2019-07-29T03:00:34.423

Give a try to dom-to-image, it works better for me since I have to set specific size, and show and element that hides 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);
});

}

HTML2Canvas converting overflowed content to image

2 Answers2

Linked