Html2canvas: saving element that extends beyond the viewport

[dking3876]

Im trying to use this to save a page, that extends beyond the viewport but it keeps getting cut off. Is there a way to save . below is the code im using. when i make the element small enough to fit in the viewport it works just fine but the image that i get is just far to small for what i need it for, and increasing the size only makes blurry. Some of these images in the size i need them are 1300px+ high

`html2canvas(preview, {
background: '#ffffff',
onrendered: (canvas)=>{

            canvas.toBlob((blob)=>{
                FileSaver.saveAs(blob, 'mysave.png');
            })

        }
    })`

[ffflabs]

If the element contained in a container, div, modal, etc that has inner scrolling?

[dking3876]

The direct container i want to capture does not have scrolling but the parent container does. I will try putting the scrolling on the direct container and see if that works

[dking3876]

No good. i adjusted so the container im capturing has scrolling to show the full dom, and it still gets cut off at the screen visible section.

any other thoughts??

[ffflabs]

You could try cloning the contents of the element and appending them to the body just while the capturing takes place, then remove it. Something like

var clone = document.getElementById('my_element').cloneNode(true);
//... style the clone so it doesn't have scroll...

return html2canvas(clone, {
        useCORS: true,
        allowTaint: false,
        logging: false
    }).then(function (canvas) {
        document.body.removeChild(clone);
        return canvas;
    });