HTML2Canvas 将溢出的内容转换为图像答案

【问题标题】：HTML2Canvas converting overflowed content to imageHTML2Canvas 将溢出的内容转换为图像
【发布时间】：2013-08-03 10:30:32
【问题描述】：

我有一个非常溢出的 div。它基本上包括一个大的组织结构图。我想要做的是使用 html2canvas 库导出 div 的全部内容而不是可见部分，但到目前为止我无法实现。以下代码不会呈现完整内容。有没有办法实现？

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>

【问题讨论】：

标签： javascript html canvas html2canvas

【解决方案1】：

我不知道 html2canvas 中是否有一个简单的选项来执行此操作（即将所有溢出设置为可见的选项），但一种迂回的方法可能是在导出时将图表元素的溢出属性的父级设置为可见函数被调用，然后在 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);
        }
     });
}

【讨论】：

感谢您的绝妙主意！我设法获得完整的图像。但是，我的做法略有不同。我直接更改了容器大小（现在是一个荒谬的数字，但是可以计算实际大小），然后改回原来的大小。
小部件现在支持 AutoSize 选项，因此它会扩大其大小以自动显示所有内容。

【解决方案2】：

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

}

【讨论】：