3

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.

enter image description here

Any ideas of what could cause this behavior?

Pete
  • 57,112
  • 28
  • 117
  • 166
Linesofcode
  • 5,327
  • 13
  • 62
  • 116
  • did you call the height on load or ready? if on ready you may be taking the height before the image has loaded in which case the height won't be tall enough – Pete Sep 29 '14 at 11:51
  • @Pete, first of all thanks. I manage to find that the problem belongs to a CSS file I use, because I tested a similiar code in JSFiddle and it worked..and then I tested without calling my CSS file and worked as well..but with the CSS file it doesn't. See the following images: http://s24.postimg.org/jl2fqdtv9/image.png http://s24.postimg.org/hhs0ipu2d/image.png - the first image has the CSS file the second doesn't. – Linesofcode Sep 29 '14 at 13:26

1 Answers1

2

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'/>");
    }
});
Linesofcode
  • 5,327
  • 13
  • 62
  • 116