Search code examples
javascriptcanvashtml2canvas

DOM element to image generates only white image

I'm using html2canvas to create images from the DOM element.

The code looks like this.

    const node = document.getElementById('domElement') 
    html2canvas(node, {
      windowWidth: node.scrollWidth,
      windowHeight: node.scrollHeight,
    }).then(canvas => {
      const image = canvas.toDataURL()
    })

But its only rendering an image that is fully white. The image size (l*b) is accurate.

enter image description here

But when I try to render the image of the full body it shows the image but with blank white screen on top.

i.e. when,

    const node = document.body

enter image description here

How will the elements be added properly and not the blank white screen on the image?

The code is inside an antd design modal.

Solution

  • This statement solved my problem.

    window.scrollTo(0, 0)

    The final code looks like

    window.scrollTo(0, 0)
const node = document.getElementById('domElement') 
html2canvas(node, {
  windowWidth: node.scrollWidth,
  windowHeight: node.scrollHeight,
}).then(canvas => {
  const image = canvas.toDataURL()
})