使用响应式布局时 html2canvas 图像被裁剪
html2canvas image got cropped when using responsive layout
我正在使用 html2canvas 保存具有响应式设计的网页图像（使用 bootstrap）。我试图生成一个固定宽度的图像，所以我使用了选项 windowWidth.
这是我创建的示例：https://stackblitz.com/edit/angular-ivy-dpenbw
在示例中，我希望将灰色区域保存到图像中。但是，如果我的 window 尺寸较大而 window 宽度较小（反之亦然），则生成的图像会被错误地裁剪。如何获得正确裁剪的图像？
我认为裁剪图片背后的原因是它使用了任何尺寸更改之前的原始高度。在您的情况下，当宽度缩小时您的元素会变高，因此它在底部被切断。
我的解决方案可能不是你想要做的，但我希望它能给你一些启发。我没有捕获单个元素，而是设法捕获了所有具有正确大小的元素。
我们的想法是，您可以创建一个具有所需宽度的 iframe，将元素复制到其中并获取 scrollHeight。这样您就可以获得调整后元素的高度并将其用于您的图像。
我已经修改了你的例子来展示它是如何工作的：https://stackblitz.com/edit/angular-ivy-6185rn
我正在使用 html2canvas 保存具有响应式设计的网页图像（使用 bootstrap）。我试图生成一个固定宽度的图像，所以我使用了选项 windowWidth.
这是我创建的示例：https://stackblitz.com/edit/angular-ivy-dpenbw
在示例中，我希望将灰色区域保存到图像中。但是，如果我的 window 尺寸较大而 window 宽度较小（反之亦然），则生成的图像会被错误地裁剪。如何获得正确裁剪的图像？
我认为裁剪图片背后的原因是它使用了任何尺寸更改之前的原始高度。在您的情况下，当宽度缩小时您的元素会变高，因此它在底部被切断。
我的解决方案可能不是你想要做的，但我希望它能给你一些启发。我没有捕获单个元素，而是设法捕获了所有具有正确大小的元素。
我们的想法是，您可以创建一个具有所需宽度的 iframe，将元素复制到其中并获取 scrollHeight。这样您就可以获得调整后元素的高度并将其用于您的图像。
我已经修改了你的例子来展示它是如何工作的：https://stackblitz.com/edit/angular-ivy-6185rn