Can you download the canvas of react Three Fiber as image ?

[akpamaboris]

How are you ?
Can you download the Canvas of React Three Fiber as image ? I have not found how to do it !

Based on the example in the documentation, do you know how to do it ?

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

[drcmda]

sure. here's a running example (open leva, click "screenshot"): https://codesandbox.io/s/basic-demo-forked-rnuve

the threejs canvas needs a prop for that to work:

<Canvas gl={{ preserveDrawingBuffer: true }} 

this is not something for us to document i guess, it's a regular webgl/threejs thing. like a thousand other things that are very specific and usecase driven.

[JoyDhar32]

Hey it works. Honestly saved my project. Thanks

[ThisIsMonta]

For anyone who cannot access the useThree hook (due to hiearchy), you can do this instead :

const link = document.createElement('a')
const canvas = document.querySelector('canvas') as HTMLCanvasElement // this was the gl dom element
link.setAttribute('download', `Screenshot-${Date.now()}.png`)
link.setAttribute(
      'href',
       canvas // instead of gl.domElement
           .toDataURL('image/png')
           .replace('image/png', 'image/octet-stream')
)
link.click()
link.remove()

[akpamaboris]

Thank you for everything you do for the community

[oveddan]

In my case, I don't want to leave preserveDrawingBuffer as true all the time, because as far as I know that can have performance implications.

I want to be able to turn it on, capture a screenshot, then turn it off; turning it on after a while doesnt seem to have an effect though;

I came across this answer on stackoverflow for another way tot do this in three.js:

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

toDataURL must be called before exiting the current event.

Are there hooks in r3f, like onAfterRender - that can be used on a Canvas element to inject a callback that captures a screenshot?

[drcmda]

didnt know about that, interesting! you dont need onafterrender, you can fetch gl from anywhere and render any time you want

const { gl, scene, camera } = useThree()
...
<foo onClick={() => {
  gl.render(scene, camera)
  const screenshot = gl.domElement.toDataURL()