Geek Answers Handbook

Html2canvas screenshot capturing the current window, not the whole body

Trying to capture a screenshot of the entire body of the page (including fields filled by the user) in javascript, but html2canvas only captures the current window, even when I set the height to a huge amount. The html2canvas sample websites seem to have my desired functionality, but I can't figure out what they do differently.

<button id="pdfbutton" type="button">Click Me!</button> <script type="text/javascript"> $( "#pdfbutton" ).click(function() { html2canvas(document.body, { onrendered: function(canvas) { // document.body.appendChild(canvas); var img = canvas.toDataURL("image/png"); console.log(img); document.body.appendChild(canvas); } // height: 10000 }); }); </script>

Please let me know if there are any other ways to capture a screenshot when a button is clicked in javascript (without entering a URL, as the user fills in the fields on my page).

+5
source share
2 answers

This problem is resolved by removing the style attribute (height, position), which is not supported by html2canvas and adds it after capturing a screenshot. In my case, I ran into a position problem.

  $('.element').css('position','initial'); // Change absolute to initial $my_view = $('#my-view'); var useHeight = $('#my-view').prop('scrollHeight'); html2canvas($my_view[0], { height: useHeight, useCORS: true, allowTaint: true, proxy: "your proxy url", onrendered: function (canvas) { var imgSrc = canvas.toDataURL(); var popup = window.open(imgSrc); $('.element').css('position','absolute'); } });

It takes a screenshot of the entire screen, including the scrollable part. check this solution

+2
source

Html2Canvas has a problem that causes it to display an element from the top border of the window. You can view the scroll at the top of the item.

The second problem is overflow handling. Set overflow: visible to the parent element and delete it after export.

0
source

More articles:


All Articles