Html2Canvas无法正确渲染多个div

Html2Canvas不能够正确地呈现多个div时Html2Canvas无法正确渲染多个div

的资料核实的数量增加显著，或
的每个DIV的大小增加显著（那么它失败用更少的DIV数）

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

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

当图像数越多，或图像的大小和分辨率高，只有少数图像被正确地转换。剩余的图像部分转换或根本不转换。有没有可用于解决此问题的解决方法？

来源

2015-01-21 lofty khanna

你曾经能够弄清楚这一点吗？ – whatsTheDiff 2016-06-27 15:49:12

我呼唤你的递归函数的使用延时和使用回调作为html2canvas之前已经实现了这个使用回调和延迟.... 是异步调用

来源

2015-01-29 12:55:25

能否请您为我提供具体的例子 – 2015-02-05 08:03:04

我申请了延迟如果（div_number <= 18）{ 的setTimeout（函数（）{ html2canvas（$（ “＃tempDivforpublishplan” + div_number），img2canvasObj）; } ，3000）; } 但仍然是相同的问题请帮助:) – 2015-02-05 08:04:06

我觉得你有这样的烦恼，因为你在到达CanvasRenderer高度限制渲染。假设你的所有div你的页面高度超过40000px。 Html2Canvas完全呈现你的页面，然后根据你的div的位置从你的div中裁剪出来。如果您在html2canvas选项中看到控制台的“logging：true”，您可以看到画布对象的大小。这里有一些关于这个问题的更多信息：Maximum size of a <canvas> element

来源

2015-03-18 19:58:11

Html2Canvas无法正确渲染多个div

回答

相关问题