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

        }
    })`

Source

dking3876

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

ffflabs on 8 Nov 2017

👍3

All 4 comments

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

ffflabs on 4 Nov 2017

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 on 6 Nov 2017

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

dking3876 on 7 Nov 2017

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

ffflabs on 8 Nov 2017

👍3

Was this page helpful?

0 / 5 - 0 ratings