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

回答

相關問題