html2canvas returns invalid image when the body height is more than 30000 pixels
Question
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
3 answers
solution1
1 ACCPTED 2016-06-08 05:05:48
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
}
});
solution2
1 2018-07-26 12:40:42
$('#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();
}
});
});
solution3
0 2018-11-12 04:41:50
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');
});`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.