HTML2Canvas將溢出的內容轉換爲圖像

我有一個很漂亮的div。它基本上包括一個大的組織結構圖。我想要做的是導出div的整個內容而不是html2canvas庫中的可見部分，但目前爲止我還無法實現。以下代碼不會呈現完整內容。有沒有辦法實現它？HTML2Canvas將溢出的內容轉換爲圖像

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

我正在使用BasicPrimitives庫來生成組織結構圖。它需要一個div並插入所有元素。由於我的圖表適度大，它從容器溢出。 XHTML代碼如下：

<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>

來源

2013-08-02 Cengiz Kandemir

我不知道是否有在html2canvas一個簡單的選項來做到這一點（即一個選項來設置所有溢出可見），但一種迂迴的方式可能是設置父圖表元素的overflow屬性可見，當你導出函數被調用的，然後將其設置回再次隱藏在html2canvas' onrendered回調，使用戶擁有最少的時間來感知它：

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

來源

2013-08-02 10:01:45 xdl

謝謝你的高招！我設法得到完整的形象。但是，我做了一些稍微不同的事情。我直接更改了容器大小（現在是一個荒謬的數字，但是可以計算實際大小），然後再變回原始大小。 –

另請參閱：https://github.com/niklasvh/html2canvas/issues/60 – Noyo

該小組件現在支持AutoSize選項，因此它會擴大其大小以自動顯示所有內容。 –

給一個嘗試dom-to-image ，因爲我必須設置特定的尺寸，並且顯示和隱藏這些元素，所以我對我的工作更好我的屏幕尺寸：

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

}

來源

2017-11-17 17:10:08 Condemateguadua

HTML2Canvas將溢出的內容轉換爲圖像

回答

相關問題