html2canvas无法获得图像全高

时间:2014-09-29 11:40:46

标签: javascript jquery html css html2canvas

由于某些我无法理解的原因,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()但不幸的是图像不断被切断。我也尝试设置高度1124,但结果是一样的。

很难看到,但在下面的图片中,您会看到图像的白色部分没有任何边框。我在该部分所拥有的一切都没有显示出来。

enter image description here

有什么可能导致这种行为的想法?

1 个答案:

答案 0 :(得分:1)

<强>解决

我的代码实际上是正确的,问题出在我使用的CSS文件上。 为了避免这种情况,我将div删除并再次调用文件,同时将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'/>");
    }
});