html2canvas 生成的图像与 DOM 非常不同

Question

我遇到 html2canvas 无法准确渲染节点显示方式的问题。我知道它对 CSS 属性的支持有限，我们在这里使用

transform

属性。有谁更准确地知道如何调试它，或者这是否是库的限制？

实际节点样子：

html2canvas生成的图像：

这是 html2canvas 代码：

const takeScreenshot = async () => {
  const node = document.getElementById("screenshot-area");
  if (node == null) return;

  const canvas = await html2canvas(node, {
    useCORS: true,
    windowHeight: 550,
    height: 430,
    backgroundColor: "#141627",
  });

  const image = canvas.toDataURL("image/png", 1.0);
  const link = document.createElement("a");
  link.download = "screenshot.png";
  link.href = image;
  link.click();
};

Answer 1

来自文档：

屏幕截图基于 DOM，因此可能无法 100% 准确地反映真实情况，因为它不会制作实际屏幕截图，而是根据页面上的可用信息构建屏幕截图。

来源：https://www.npmjs.com/package/html2canvas

...抱歉