0

I am trying to usehtml2canvas to export some divs in .png format. My div has a greater height than my body which is not a problem because I can use the windowHeight option with myDiv.scrollHeight and it works perfectly.

function exp(e) {
    html2canvas(e, {
        windowWidth: e.scrollWidth,
        windowHeight: e.scrollHeight * 1.12
    }).then((canvas) => {
        let a = document.createElement("a");
        a.download = 'capture_' + date + '.png';
        a.href = canvas.toDataURL("image/png");
        a.click();
    });
}

Now, the thing is, the div I'm "screening" is resizable. It shouldn't be a problem given I use the scrollHeight value but it takes the actual height into account instead of scrollHeight.

Working before resize Working

Not working after resize Not working

I tried pretty much everything I could find on the internet, every configuration option on html2canvas, myDiv.scrollTo(0,0) as explain in this second answer

I don't know if it can help but here is my resize code :

function resize_height(e) {
    topTab.scrollTop = 0
    topTab.style.overflow = 'hidden'

    const dx = m_pos_height - e.y;
    m_pos_height = e.y;

    topTab.style.height = (topTab.offsetHeight - dx) + "px"
    botTab.style.height = cont - (topTab.offsetHeight - dx) + "px"

    topTab.style.maxHeight = cont + 'px'
}

botTab.addEventListener("mousedown", function (e) {
    if (e.offsetY < BORDER_SIZE_HEIGHT) {
        m_pos_height = e.y;
        document.addEventListener("mousemove", resize_height, false);
    }
}, false);
document.addEventListener("mouseup", function () {
    document.removeEventListener("mousemove", resize_height, false);
    topTab.style.overflow = 'auto'
}, false);

topTab being the div I try to screen.

0 Answers0