Save hidden DIV as canvas image

Question

I used the following code to save the visible as image.

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

Is there any way that I can able to save the hidden

Answer 1

There are some solutions out there, like for example display property toggle, or render inside hidden element.

Solution 1

Quickly toggle visibility property

const el = document.querySelector('.specific');
el.style.display = "block"; // or any other property, like opacity, visibility...
html2canvas(el, {...}).then((canvas) => {
   el.style.display = "none";
};

Solution 2

Wrap your div (and make it visible) inside an invisible wrapper

<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>

Solution 3

Using html2canvas onclone callback function you can modify object passed to renderer (I think it's the best solution)

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