4

The html2canvas library behaves strangely when I need to capture a control placed on an html body which is more than 30000 pixels long. My control is small (100 x 100) - but the script doesn't work when the body is long.

Here are two fiddles one is working other one is not working different body sizes

$(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>

In the above example, the library returns an image - but the data is not valid. If I change the body height to something like 20000 pixels, everything works fine

Azad
  • 5,144
  • 4
  • 28
  • 56
  • 1
    Example not working on FF with `top` higher than `32741px`. Chrome this number increases to `32746px`. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas – Justinas May 30 '16 at 07:56
  • @Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document. – Azad May 30 '16 at 07:58
  • I don't know, I just made quick test. – Justinas May 30 '16 at 07:59

3 Answers3

1

finally I found why this happens based on this stackoverflow answer

the html2canvas library creates a canvas its width height is the width and height of document body. If document width or height exceeds the maximum width and height allowed by the browser then its failed to create the canvas for that document body that why I am getting a invalid image.

To solve this problem I cloned the Element which to be transfer to image and set to the top of the document ('position: absolute; top: 0') and get the image from it. after get the image I removed that cloned element. remember to do this we need to set width and height property of "html2canvas" library options.

I my case my element max height is 1000px and I set 3000, 3000 therefore it can be cover entire element which positioned top.

note: Do not set invisible or hide the cloned element.

html2canvas($parentNode, { 
    width: 3000,
    height:3000,
    onrendered: function(canvas) {
        console.log(canvas.toDataURL());
        $parentNode.remove(); //removing cloned element
    }
});
masud_moni
  • 1,121
  • 16
  • 33
Azad
  • 5,144
  • 4
  • 28
  • 56
1
$('#test').click(function () {
    // Create clone of element.
    var clone = $('#element').clone(); 

    // Append clone to body.
    $('body').append(clone); 

    html2canvas($('#element'), {
        onrendered: function (canvas) {
            console.log(canvas.toDataURL("image/png")); 

           // Remove clone element.
          clone.remove();
        }
    });
});
Nitin Singh Naruka
  • 95
  • 3
  • 12
0

Works for me adding style overflow-y:hidden to body tag before html2canvas and restore it to overflow-y:scroll after . 

$("#doss").click(function(){
    $('body').css('overflow-y','hidden');
    html2canvas(document.querySelector("body")).then(canvas => {
       document.body.appendChild(canvas)
    });
    $('body').css('overflow-y','scroll');
});`
Tân
  • 1
  • 15
  • 56
  • 102
Mario Abbruscato
  • 819
  • 1
  • 7
  • 9