Html2canvas: saving element that extends beyond the viewport

Created on 3 Nov 2017  路  4Comments  路  Source: niklasvh/html2canvas

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

        }
    })`

Most helpful comment

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

All 4 comments

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

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

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

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;
    });
Was this page helpful?
0 / 5 - 0 ratings

Related issues

celik75 picture celik75  路  4Comments

deepender87 picture deepender87  路  4Comments

kunal886496 picture kunal886496  路  3Comments

tjchambers32 picture tjchambers32  路  3Comments

Loki180 picture Loki180  路  4Comments