html2canvas无法读取嵌入式背景颜色样式

时间:2019-01-04 12:55:08

标签: javascript html css html2canvas

我正在使用html2canvas,除了使用嵌入式样式时不会读取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);
}

1 个答案:

答案 0 :(得分:0)

它确实显示背景。请参阅控制台日志以获取图像数据。

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

这是小提琴:https://jsfiddle.net/nxrvsphz/