HTML2Canvas将溢出的内容转换为图像 [英] HTML2Canvas converting overflowed content to image

问题描述

我有一个很漂浮的div。它基本上包括一个大的组织图。我想做的是导出整个内容的div，而不是可视部分与html2canvas库，但我无法实现到目前为止。下面的代码不会呈现完整的内容。有没有办法实现它？

I have a div which is pretty overflowed. It basically includes a big organization chart. What I want to do is exporting whole content of div rather than visible part with html2canvas library but I couldn't achieve it so far. Following piece of code doesn't render full content. Is there a way to achieve it?

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代码如下：

I am using BasicPrimitives library to generate organization charts. It takes a div and insert all elements to it. Since my chart is moderately big, it overflows from its container. Xhtml code is as follows:

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

推荐答案

我不知道是否有一个简单的选项html2canvas来做这个（即一个选项设置所有溢出到可见），但一个迂回的方法可能是设置图元素的overflow属性的父级可见，当您的导出函数被调用，然后将其设置回隐藏的html2canvas' （）{
document.getElementById（）方法返回一个新的回调函数，以便用户有最小的时间去感知它：

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

这篇关于HTML2Canvas将溢出的内容转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！