html2canvas不会获得图像全高

html2canvas不会获得图像全高

本文介绍了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。高度(),但不幸的是图像不断被切断。我也试图设置高度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不会获得图像全高的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-22 13:27