Html2Canvas然后Canvas2Image剪切生成的图像

Question

我试图在我的网络应用程序上从Html日历生成PDF，但是当我将html转换为cavas而不是将其转换为图像时，我将图像剪切掉了，错过了最后一部分日历。

图像的裁剪取决于屏幕尺寸，如果我尝试在更大的屏幕上生成它，它看起来像这样：

我的代码如下所示：

var html2Obj = html2canvas($('#calendar'));
var queue = html2Obj.parse();
var canvas = html2Obj.render(queue);
var img = canvas.toDataURL();
window.open(img);
var doc = new jsPDF('landscape', 'cm');
doc.addImage(img, 'JPEG', 1, 1, 27.7, 19);
doc.save('calendar.pdf');

那么，如何在不丢失页面内容的情况下创建该截图？

Answer 1

我认为jspdf根据屏幕大小使用一些默认页面高度，但pdf规范中没有实际的高度限制。你可以增加页面大小，以便它可以包含更多东西。在构造函数中通过[width,height]，你可能需要通过跟踪和错误调整精确值

var doc = new jsPDF('landscape', 'cm', [50,50]);
doc.addImage(img, 'JPEG', 1, 1); //no explicit dimensions
doc.save('calendar.pdf');

编辑： 如果是这种情况，则在构造函数

中传递所需的高度宽度值

var html2Obj = html2canvas($('#calendar'),{width: desiredWidth,height:desiredHeight});