DOM element to image generates only white image Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of DOM element to image generates only white image without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

Answer

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()
})
We are here to answer your question about DOM element to image generates only white image - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji