HTML2Canvas konwertowanie przepełnionej treści do obrazu

Question

Mam div, który jest dość przepełniony. Zasadniczo zawiera duży schemat organizacyjny. Co chcę zrobić, to eksportowanie całej zawartości div zamiast widocznej części przy użyciu biblioteki html2canvas, ale nie udało mi się tego osiągnąć. Poniższy fragment kodu nie renderuje pełnej treści. Czy istnieje sposób, aby to osiągnąć?

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

Używam biblioteki BasicPrimitives do generowania wykresów organizacyjnych. Zajmuje element div i wstawia do niego wszystkie elementy. Ponieważ mój wykres jest umiarkowanie duży, przepełnia go jego kontener. kod XHTML jest w następujący sposób:

<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

Nie wiem, czy jest to proste rozwiązanie w html2canvas to zrobić (tj opcję, aby ustawić wszystkie przepełnienie do widoczna) ale sposób rondo może być ustawiony rodzica mienia przelewowy elementu diagramu, aby widoczna, gdy funkcja eksportu nazywa, a następnie ustawić go z powrotem do ukryty ponownie onrendered zwrotnego html2canvas', dzięki czemu użytkownik ma minimalny czas, aby go postrzegają:

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

dać spróbować dom-to-image , Pracuję dla mnie lepiej, ponieważ muszę ustawić konkretny rozmiar i pokazać oraz element, który się w nim kryje mi Przekątna:

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

}