Html2Canvas 然后 Canvas2Image 切割生成的图像答案

【问题标题】：Html2Canvas then Canvas2Image cutting the generated imageHtml2Canvas 然后 Canvas2Image 切割生成的图像
【发布时间】：2016-09-21 20:00:07
【问题描述】：

我正在尝试从我的网络应用程序上的 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');

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

【问题讨论】：

标签： javascript html image canvas

【解决方案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});

【讨论】：

实际上是在从html到canvas再到图像的转换上进行裁剪，生成的PDF大小合适。
你的画布使用什么定位？
它现在几乎可以工作了，但是现在，日历转到生成的画布的中心，并且不断地切割日历的一半。如何将画布设置为要转换的 div 的大小？
“日历的一半”在哪里？在画布创图片还是pdf？如果它的画布通过 css 增加你的 <canvas> or <div> 尺寸
它会剪切画布的内容，如果我尝试将生成的画布附加到正文，它不会显示，如果我打开生成的图像，它会被剪切并且在 PDF 中它也只是日历的一半.我试过这样： var html2Obj = html2canvas($('#calendar'), { width: $('#calendar').width(), height: $('#calendar').height() }) ;