HTML2Canvas converting overflowed content to image
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);
});
}
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);
}
});
}