javascript - html2canvas 没有得到图像全高

Question

出于某种我无法理解的原因，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.height() 但不幸的是图像总是被 chop 。我也试过设置高度1124，结果一样。

很难看到，但在下图中，您可以看到图像的白色部分，没有任何边框。我在那部分的所有内容都没有显示。

有什么可能导致此行为的想法吗？

Answer 1

已解决。

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

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