當身體高度超過30000像素時，html2canvas會返回無效圖像

當我需要捕獲放置在長度超過30000像素的html正文上的控件時，html2canvas庫的行爲會很奇怪。我的控制很小（100 x 100） - 但當身體很長時，腳本不起作用。當身體高度超過30000像素時，html2canvas會返回無效圖像

這裏有兩個小提琴一個正在另一個不工作不同體型

$(document).ready(function() { 
 
    $('#test').on('click', function() { 
 
    html2canvas(document.getElementById('container'), { 
 
     onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
     }, 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
 

 
<body style="height:40000px"> 
 

 
<button id="test">test</button> 
 

 
<div id='container'> 
 
    <img style='width:200px; height:200px;' src="www.example.com/example.jpg"> 
 
</div> 
 
</body>

在上例中，庫返回一個圖像 - 但數據無效。如果我改變車身高度，以類似20000個像素，一切工作正常

來源

2016-05-30 azad

示例不能在'top'高於'32741px'的FF上工作。 Chrome這個號碼增加到'32746px'。 IE11似乎沒有這個問題。所以我認爲它是瀏覽器特定的。嘗試提交問題到Html2Canvas – Justinas

@Justinas爲什麼它的發生，我們不能在文件大小大於32741px時獲得圖像我有動態增長的文檔。 – azad

我不知道，我只是做了快速測試。 – Justinas

終於讓我找到爲什麼會這樣基於this stackoverflow answer

的html2canvas庫創建一個畫布寬度高度寬度和文檔主體的高度。如果文檔寬度或高度超過瀏覽器允許的最大寬度和高度，則無法爲該文檔正文創建畫布，以便我獲取無效圖像。

爲了解決這個問題，我克隆了要傳輸到圖像並設置到文檔頂部（'position: absolute; top: 0'）的元素並從中獲取圖像。得到圖像後，我刪除了克隆的元素。記得要做到這一點，我們需要設置「html2canvas」庫選項的寬度和高度屬性。

我的情況我的元素最大高度是1000px，我設置了3000,3000，因此它可以覆蓋整個位於頂部的元素。

注意：不要設置隱藏或隱藏克隆的元素。

html2canvas($parentNode, { 
          width: 3000, 
          height:3000, 
          onrendered: function(canvas) { 
           console.log(canvas.toDataURL()); 
           $parentNode.remove(); //removing cloned element 
           } 
          });

來源

2016-06-08 05:05:48 azad

當身體高度超過30000像素時，html2canvas會返回無效圖像

回答

相關問題