将隐藏的 DIV 保存为 canvas 图片

Question

我使用以下代码将可见的内容保存为图像。

html2canvas(document.querySelector('.specific'), {
        onrendered: function(canvas) {
        theCanvas = canvas;
        Canvas2Image.saveAsPNG(canvas); 
    }
});

有什么办法可以挽救隐藏的

Answer 1

有一些解决方案，例如显示属性切换，或在隐藏元素内渲染。

解决方案 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>

或

<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); 
    }
});

将隐藏的 DIV 保存为 canvas 图片

Save hidden DIV as canvas image

html

javascript

html5-canvas

html2canvas

解决方案 1

解决方案 2

解决方案 3