html2Canvas image cut sometime

Question

I have below code

window.scrollTo(0, 0);
    const totPage = document.getElementsByClassName('print');
    for (let index = 1; index < totPage.length;) {
        const input = totPage[index] 
        let orn = input.getAttribute('orientation');
        let canvas = await html2canvas(input,{
            windowWidth: input.scrollWidth,
            windowHeight: input.scrollHeight
        });//.then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        console.log(imgData)
       
        index++

    }

it generates pdf with image cut off. but strangely when I open console on browser and then try it generates images perfectly, and after then even I closed the console the images are generating correctly. its strange but cannot figure out why this is happening

It's a bit difficult to fathom what you mean here. Could you put up a working snippet so we can try it for ourselves - there's missing info e.g. what html you are trying to print, is everything definitely loaded before writing to the canvas etc. — A Haworth, Jun 28 '21 at 14:42

score 0 · Answer 1 · answered Jun 29 '21 at 08:48

0

I solved with this: https://github.com/niklasvh/html2canvas/issues/1438#issuecomment-739244530

That is a comment in this post: HTML2Canvas does not render full div, only what is visible on screen?

answered Jun 29 '21 at 08:48

Luca Asga

41
1
7

html2Canvas image cut sometime

1 Answers1