html2canvas图像在使用响应布局时被裁剪



我正在使用html2canvas保存具有响应设计的网页的图像(使用引导程序(。我试图生成一个固定宽度的图像,所以我使用了windowWidth选项。

下面是我创建的一个示例:https://stackblitz.com/edit/angular-ivy-dpenbw

在这个例子中,我希望灰色区域被保存到一个图像中。但是,如果我有一个大的窗口大小和一个小的窗口宽度(反之亦然(,则生成的图像会被错误地裁剪。如何获得正确裁剪的图像?

我相信裁剪后的图像背后的原因是它在任何大小更改之前都使用了原始高度。在你的情况下,当宽度缩小时,你的元素会变得更高,所以它在底部被切掉了。

我的解决方案可能并不完全是你想做的,但我希望它能给你一些灵感。我没有捕获单个元素,而是设法捕获了所有具有正确大小的元素。

其想法是,您可以创建一个具有所需宽度的iframe,将元素复制到其中并获得scrollHeight。通过这种方式,您可以获得调整大小的元素的高度,并将其用于图像。

我修改了您的示例,以显示它是如何工作的:https://stackblitz.com/edit/angular-ivy-6185rn

最新更新