Html2Canvas然后Canvas2Image剪切生成的图像

I'm trying to generate a PDF from a Html calendar on my web app, but when I convert the html into a cavas and than convert it to and image I got the image cutted, missing the last part of the calendar.

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

The cropping of the image depends on the screen size, if I try to generate it on a bigger screen it looks like this:

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

My code looks like this:

我的代码如下所示:

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');

So, how can I create that screenshot without losing the page content?

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

1 个解决方案

#1

I think jspdf uses some default page height based on screen size but there is no practical height limit in pdf spec. you can just increase page size so that it can include more stuff.Pass a [width,height] in the constructor you may need to adjust exact value by trail and error

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

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

EDIT: If that is the case then pass desired height width value in constructor

编辑:如果是这种情况,然后在构造函数中传递所需的高度宽度值

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

#1

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

EDIT: If that is the case then pass desired height width value in constructor

编辑:如果是这种情况,然后在构造函数中传递所需的高度宽度值

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

秒客网

Html2Canvas然后Canvas2Image剪切生成的图像

1 个解决方案

#1

#1

相关文章