XtermJs can use WebGL: SVG canvas capture returns blank

[theflyingape]

This works using XtermJs (the terminal emulation library also used in VS Code) DOM renderer for compatibility; but their WebGL renderer is much more performant on today's hardware and browsers.

I left a note on this issue with their developers hoping for a clue or breakthrough: https://github.com/xtermjs/xterm.js/issues/5338#issuecomment-2884637363

Is there something special required to capture their WebGL canvas?

  <div class="bg-zinc-200 min-h-dvh h-dvh min-w-full w-full">
    <div class="flex flex-nowrap h-full w-full justify-center pt-2">
      <!-- monitor with a thin bezel -->
      <div ref="crt" class="bg-zinc-800 p-3 pb-8 rounded-md min-w-5/12 w-5/6 max-w-11/12 min-h-1/2 h-11/12 max-h-11/12 overflow-hidden resize resizer">
        <DevOnly><XtermJs v-show="value == 'localhost'" @vue:mounted="console.log('mounted!')" session="localhost" theme="White" :wsUrl="`${wsUrl}`" :fontSize=save.fontSize /></DevOnly>
        <XtermJs v-show="value == 'Dev'" @vue:mounted="" session="Dev" theme="White" :wsUrl="`${wsUrl}`" :fontSize=save.fontSize />
        <XtermJs v-show="value == 'Test'" @vue:mounted="" session="Test" theme="Green" :wsUrl="`${wsUrl}`" :fontSize=save.fontSize />
        <XtermJs v-show="value == 'Live'" @vue:mounted="" session="Live" theme="Amber" :wsUrl="`${wsUrl}`" :fontSize=save.fontSize />
...

function snap() {
// html2canvas(<HTMLDivElement>document.getElementById('monitor')).then((canvas) => {
  htmlToImage.toJpeg(<HTMLDivElement>get(crtRef)!.getElementsByClassName('xterm-screen')[0], { quality: 0.9 }).then((dataUrl:string) => {
    const link = document.createElement('a')
    link.download = `${get(value)}-crt-snap.jpg`
    link.href = dataUrl
    link.click()
  })  
}

I've tried every parent-child DIV off the element inspector, but had to settle for the DOM renderer.

• html-to-image: latest 1.11.13
• OS: latest Fedora 42, Windows 11, and ChromeOS
• Browser: latest Chrome
• latest Nuxt 3.17.3, UI Pro 3.1.2 with TailWind CSS 4.0.7

[biiibooo[bot]]

👋 @theflyingape

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.