我使用的是 html2canvas,除了当我使用内联样式时没有读取 div 的背景颜色外,它工作得很好。然而,当使用样式表时它确实有效,但由于颜色由 react 控制,我需要它来更好地读取内联样式,有人可以帮助解决这个问题吗?
我的 html:
<div id="testDiv" class="page" style="width: 530px; height: 630px; background-color: red; position: relative;">...</div>
我的代码:
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);
}
最佳答案
它确实显示了背景。有关图像数据,请参阅控制台日志。
html2canvas(document.querySelector("#testDiv")).then(canvas => {
console.log(canvas.toDataURL());
});
这是 fiddle :https://jsfiddle.net/nxrvsphz/
关于javascript - html2canvas 不读取内联背景颜色样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54039395/