angular - 使用响应式布局时 html2canvas 图像被裁剪

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

在示例中，我希望将灰色区域保存到图像中。但是，如果我的窗口大小较大且窗口宽度较小（反之亦然），则生成的图像会被错误地裁剪。如何获得正确裁剪的图像？

标签： angularhtml2canvas

我相信裁剪图像背后的原因是它在任何尺寸更改之前使用了原始高度。在您的情况下，当宽度缩小时，您的元素会变得更高，因此它在底部被切断。

我的解决方案可能不是您想要做的，但我希望它能给您一些启发。我没有捕获单个元素，而是设法以正确的大小捕获了所有元素。

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

我修改了你的例子来展示它是如何工作的：https ://stackblitz.com/edit/angular-ivy-6185rn