Html2canvas not getting full height image

Question

For some reason I cannot figure out html2canvas does not capture the entire height of the div.

html2canvas($container, { height: $container.height(), onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); var file = dataURLtoBlob(data); var formObjects = new FormData(); formObjects.append('file', file); $.ajax({ url: 'ajax_preview', type: 'POST', data: formObjects, processData: false, contentType: false, }).done(function(response){ console.log(response); //window.open(response, '_blank'); }); } }); 

I also tried manually adjusting the height to height: $container.height() , but unfortunately the image continues to be interrupted. I also tried to set the height to 1124, but the result is the same.

It's hard to see, but in the image below you see the white part of the image without any border. Everything that I have in this part is not displayed.

Any ideas on what might cause this behavior?

Answer 1

solvable .

My code is really right, the problem was in the CSS file that I am using. To avoid this, I deleted and called the file again when converting the div to an image.

 // $= means that ends with ("link[href$='my.css']").remove(); html2canvas($container, { onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); var file = dataURLtoBlob(data); // etc $('head').append("<link href='" + base_url + "public/css/my.css' rel='stylesheet'/>"); } });