HTML2Canvas konvertiert übergelaufenen Inhalt in Bild

Question

Ich habe ein Div, das ziemlich übergelaufen ist. Es enthält im Grunde ein großes Organigramm. Was ich tun möchte, exportiert den gesamten Inhalt von div eher als sichtbaren Teil mit html2canvas Bibliothek, aber ich konnte es bisher nicht erreichen. Das folgende Codeelement gibt nicht den vollständigen Inhalt wieder. Gibt es einen Weg, dies zu erreichen?

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); 
     } 
    }); 
} 

Ich verwende BasicPrimitives-Bibliothek, um Organigramme zu generieren. Es braucht ein Div und fügt alle Elemente ein. Da mein Diagramm moderat groß ist, überläuft es seinen Container. XHTML-Code lautet wie folgt:

<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

Ich weiß nicht, ob es in html2canvas eine einfache Option ist diese (dh eine Option, alle Überlauf sichtbar eingestellt) zu tun, sondern ein Umweg könnte sein, die Eltern zu setzen der Überlauf Eigenschaft sichtbar des Diagrammelement, wenn der Export-Funktion aufgerufen wird, legen sie es dann wieder zurück nach versteckt auf onrendered Rückruf html2canvas so dass der Benutzer hat nur minimale Zeit, es zu erkennen:

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

einen Versuch zu dom-to-image geben , Ich arbeite besser für mich, da ich bestimmte Größe einstellen muss, und zeigen und Element, das für so verbirgt ich Bildschirmgröße:

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); 
}); 

}