Html HTML2Canvas 将溢出的内容转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18012044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML2Canvas converting overflowed content to image
提问by Cengiz Kandemir
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?
我有一个非常溢出的 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);
}
});
}
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:
我正在使用 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>
回答by xdl
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:
我不知道在 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);
}
});
}
回答by Condemateguadua
Give a try to dom-to-image, it works better for me since I have to set specific size, and show and element that hides for some screen size:
尝试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);
});
}
}
