Question

时，Html2Canvas无法正确渲染多个DIV

DIV数量显着增加，或
每个DIV的大小显着增加（然后失败，DIV数量减少）

我使用Html2Canvas插件将div（包含图像）转换为canvas。我已经实现了一个递归函数来一次转换多个图像（参见下面的代码）。

的JavaScript

//counter 
var div_number = 0;

    function image2canvas() {
        var img2canvasObj = {
            logging:true,
            onrendered: function (canvas) {
                canvas.id = "cvs" + div_number;
                $("#canvasid").append(canvas);
         //incrementing the counter
                div_number = div_number + 1;

                if (div_number <= 18) {
                    html2canvas($("#tempDivforpublishplan" + div_number), img2canvasObj);

                    }
                    if (div_number === 19) {
        <Some Ajax Call>
                    }
                }
            };
            html2canvas($("#Content_to_convert" + div_number), img2canvasObj);
        }

多个图像的HTML（我将转换为画布）如下所示。请注意，我使用图像作为div元素的背景。这些元素中的每一个都有一个base64字符串附加到图像URL，用于将图像转换为画布。 HTML：

<div id="tempDivforpublishplan0" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
<div id="tempDivforpublishplan1" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>
.
.
.
<div id="tempDivforpublishplan19" style='background: url("data:image/png;base64,iVBORw0KGgo…..") 0% 0% / 634px 2266.26px; width: 634px; height: 2266.26px; position: relative; cursor: auto;'> </div>

当图像数量较多，或图像的大小和分辨率较高时，只能很少地转换图像。剩余的图像要么部分转换，要么根本不转换。是否有可用于解决此问题的解决方法？

Answer 1

我使用回调和延迟实现了这个目标.... 在调用递归函数之前使用延迟并使用回调，因为html2canvas是异步调用

Answer 2

我认为您遇到此问题是因为在渲染过程中达到CanvasRenderer高度限制。假设你的所有div你的页面高度超过40000px。 Html2Canvas完全渲染您的页面，然后根据div的位置裁剪div。如果你看一下在html2canvas选项中使用'logging：true'的控制台，你可以看到你的画布对象有多大。以下是有关此主题的更多信息：Maximum size of a <canvas> element

Html2Canvas无法正确呈现多个DIV

2 个答案: