html2canvas不会获得图像全高 [英] html2canvas doesn't get image full height

问题描述

出于某种原因，我无法理解，html2canvas没有捕获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'）; 
}）; 
} 
}）; 
  

我也尝试手动设置高度 height：$ container。高度（），但不幸的是图像不断被切断。我也试图设置高度1124，但结果是一样的。

很难看，但在下面的图片中，您看到图像的白色部分，而没有任何边界。我没有在该部分显示任何内容。

任何可能导致此行为的想法？

解决方案。

我的代码实际上是正确的，问题出在我使用的CSS文件上。
为了避免这种情况，我已经删除并在将div转换为图片时再次调用该文件。

  // $ =表示以
结尾（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'/>）; 
} 
}）; 
  

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?

解决方案

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'/>");
    }
});

这篇关于html2canvas不会获得图像全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！