html2canvas無法讀取嵌入式背景顏色樣式

Question

我正在使用html2canvas，除了使用div樣式時不讀取div的背景顏色外，它的效果都很好。 但是，當使用樣式表時它確實可以工作，但是由於顏色是由react控制的，因此我需要它以讀取內聯樣式為佳，有人可以幫助解決此問題嗎？

我的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;
}

在樣式表中，但是要設置背景變量並不容易。

更新：我也嘗試過使用css變量，但是html2canvas也沒有采用這種樣式。

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

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

Answer 1

它確實顯示了背景。 有關圖像數據，請參見控制台日志。

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