有一些解决方案,例如显示属性切换或在隐藏元素内渲染。
解决方案1
快速切换可见性属性
const el = document.querySelector('.specific');
el.style.display = "block"; // or any other property, like opacity, visibility...
html2canvas(el, {...}).then((canvas) => {
el.style.display = "none";
};
解决方案2
将您的 div 包裹在一个不可见的包装中(并使其可见)
<div style="position: absolute; opacity: 0; pointer-events:none;">
<div class="specific"></div>
</div>
or
<div style="overflow: hidden; height: 0;">
<div class="specific"></div>
</div>
解决方案3
使用 html2canvas onclone 回调函数,您可以修改传递给渲染器的对象(我认为这是最好的解决方案)
html2canvas(document.querySelector('.specific'), {
onclone: function(doc){
doc.style.display = 'block';
// or doc.style.opacity = '1', doc.style.visibility = 'visible' ...
},
onrendered: function(canvas) {
theCanvas = canvas;
Canvas2Image.saveAsPNG(canvas);
}
});