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
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function() {
$('#test').on('click', function() {
html2canvas(document.getElementById('container'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});<script src=".1.1/jquery.min.js"></script>
<script src=".js"></script>
<body style="height:40000px">
<button id="test">test</button>
<div id='container'>
<img style='width:200px; height:200px;' src="www.example/example.jpg">
</div>
</body>
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
- body size 40000px (not working)
- body size 30000px (working)
$(document).ready(function() {
$('#test').on('click', function() {
html2canvas(document.getElementById('container'), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen./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./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
Share Improve this question edited May 31, 2016 at 5:07 Azad asked May 30, 2016 at 7:32 AzadAzad 5,2725 gold badges31 silver badges59 bronze badges 3-
1
Example not working on FF with
tophigher than32741px. Chrome this number increases to32746px. IE11 seems does not have this issue. So I think it's browser specific. Try submitting issue to Html2Canvas – Justinas Commented May 30, 2016 at 7:56 - @Justinas why its happening, can't we get image when document size larger than 32741px I have dynamically growing document. – Azad Commented May 30, 2016 at 7:58
- I don't know, I just made quick test. – Justinas Commented May 30, 2016 at 7:59
3 Answers
Reset to default 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();
}
});
});
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
}
});
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');
});`