How Screenshot of hidden div using modern-screenshort

[jaytnw]

How to take screenshots of a hidden div? Similar to using html2canvas code below.

[html2canvas(mydiv,](url) {
    onclone: function (clonedDoc) {
        clonedDoc.getElementById('mydiv').style.display = 'block';
    }
}).then((canvas)=>{
//your onrendered function code here
})

[qq15725]

Use onCloneNode option

import { domToPng } from 'modern-screenshot'

domToPng(mydiv, {
  onCloneNode: function (clonedDoc) {
    clonedDoc.getElementById('mydiv').style.display = 'block';
  }
})

[jaytnw]

I got an error as follows

TypeError: clonedDoc.getElementById is not a function

my code

   const mydiv= document.getElementById("mydiv")

domToPng(mydiv, {
                onCloneNode: function (clonedDoc) {
                    clonedDoc.getElementById('mydiv').style.display = 'block';
                }
            }).then(dataUrl => {
                const link = document.createElement('a')
                link.download = 'image.png'
                link.href = dataUrl
                link.click()
            })

[qq15725]

I'm sorry I didn't look closely, is this what you want

onCloneNode: function (cloned) {
  // cloned === you mydiv
  cloned.querySelector('#child-element-id').style.display = 'none';
}

[jaytnw]

It not work when I use onCloneNode. domToPng return base64 is "data:"

[qq15725]

I need a minimal reproduction to debug your issue, thanks!

Playground for https://codesandbox.io

Playground for https://codepen.io

Playground for https://play.vuejs.org