出于某种我无法理解的原因,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,结果一样。
很难看到,但在下图中,您可以看到图像的白色部分,没有任何边框。我在那部分的所有内容都没有显示。
有什么可能导致此行为的想法吗?
最佳答案
已解决。
我的代码实际上是正确的,问题出在我使用的 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'/>");
}
});
关于javascript - html2canvas 没有得到图像全高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26099066/