HTML2Canvas chuyển đổi nội dung bị tràn sang hình ảnh

Question

Tôi có một div bị tràn hoàn toàn. Về cơ bản nó bao gồm một biểu đồ tổ chức lớn. Những gì tôi muốn làm là xuất khẩu toàn bộ nội dung của div hơn là nhìn thấy một phần với thư viện html2canvas nhưng tôi không thể đạt được nó cho đến nay. Đoạn mã sau không hiển thị toàn bộ nội dung. Có cách nào để đạt được nó?

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

Tôi đang sử dụng thư viện BasicPrimitives để tạo biểu đồ tổ chức. Phải mất một div và chèn tất cả các yếu tố vào nó. Vì biểu đồ của tôi khá lớn, nó tràn ra từ thùng chứa của nó. Xhtml mã như sau:

<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

Tôi không biết nếu có một lựa chọn đơn giản trong html2canvas để làm điều này (tức là một tùy chọn để thiết lập tất cả tràn để có thể nhìn thấy) nhưng một cách vòng xoay có thể là để thiết lập các mẹ bất động sản tràn các yếu tố sơ đồ để có thể nhìn thấy khi chức năng xuất khẩu của bạn được gọi, sau đó đặt nó trở lại ẩn một lần nữa trên callback onrendered html2canvas' để người dùng có thời gian tối thiểu để nhận thức nó:

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

tặng một cố gắng để dom-to-image , Tôi làm việc tốt hơn cho tôi vì tôi phải đặt kích thước cụ thể và hiển thị và phần tử ẩn tôi kích thước màn hình:

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

}