html2canvas 不读取内联背景颜色样式

Question

我正在使用 html2canvas，效果很好，但在我使用内嵌样式时 div 的背景颜色没有被读取。然而，当使用样式 sheet 时它确实有效，但是由于颜色由反应控制，我需要它来更好地读取内联样式，有人可以帮助解决这个问题吗？

我的html:

<div id="testDiv" class="page" style="width: 530px; height: 630px; background-color: red; position: relative;">...</div>

我的js:

function getThumbnail = (div) => {
  return html2canvas(div).then(canvas => {
    return canvas.toDataURL();
  });
}

除非我添加：

，否则在上面的代码中图像呈现为没有背景

#testDiv {
  background-color: red;
}

有一种风格sheet，但是背景变量的制作并不容易。

更新：我也尝试过使用 css 变量，但 html2canvas 也没有采用这种样式。

:root {
  --garment-colour: #000000;
};

#testDiv {
  background-color: var(--garment-colour);
}

Answer 1

确实显示了背景。有关图像数据，请参阅控制台日志。

html2canvas(document.querySelector("#testDiv")).then(canvas => {
    console.log(canvas.toDataURL());
});

html2canvas is not reading inline background-color style