Image getting cut off/extra white space

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

The image is getting cut off at either the bottom or top depending on the scroll position.

html2canvas(document.querySelector(".canvas"), { width: 768, height: 370, windowWidth: document.querySelector(".canvas").scrollWidth, windowHeight: document.querySelector(".canvas").scrollHeight, scrollX: 0, scrollY: -window.scrollY, x: 0, scale: 3 }).then(canvas => { console.log(canvas); var base64image = canvas.toDataURL("image/jpeg"); saveAs(base64image, 'image.jpg'); });

Specifications:

• html2canvas version tested with: v1.0.0-rc.4
• Browser & version: Chrome Version 77
• Operating system: Windows 10

[tradingstratagem]

I fixed this problem by saving the scroll position (x and y), move the page to x=0 y=0, invoke the method and restore the position, it solved the problem

[ornic]

Ye seems to work on 1.00-rc.2 so something changed since then…

Nope, I tested all RCs 1-5 - the only one that not infected with the bug is RC1.

And all workarounds mentioned in https://github.com/niklasvh/html2canvas/issues/1878 wont help, unfortunately.