html2canvas无法获得图像全高

Question

For some reason that I can't understand, the html2canvas is not capturing the whole 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 have also tried to set up the Height manually height: $container.height() but unfortunately the image keeps getting cut off. I also tried to set the height 1124, but the result is the same.

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

Any ideas of what could cause this behavior?

Answer 1

Solved .

My code is actually right, the problem was on a CSS file that I use. To avoid this I've deleted and call again the file while converting the div into 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'/>");
    }
});