Get pixel data for threejs canvas getImageData()

Questions
1

Hello. I am getting errors calling getImageData.

Is there a way to capture the 2D pixel data of a threejs canvas?

I am trying to grab the pixels of the threejs canvas and paste it over another 2D canvas to generate the thumbnail I want to save.

I believe getImageData is not happy with a wegbl or wegbl2 canvas.

I suspect there is an easy solution to this but I can’t seem to find it.

1 Like
2

If you want to extract data from a canvas, you have to set the WebGL context parameter preserveDrawingBuffer to true. Are you already doing this?

What errors?

3

oh yes that blast preserveDrawingBuffer ahhhhhh thanks

4

Hey I have been trying to do the same for long. Could you share what you have done?

5

If

preserveDrawingBuffer = true

makes your application too slow, you can try alternatively converting canvas.image to base64, in a function ejecuted right after renderer.render(). @tfoller shared a clever demo of this a couple months ago, here is the link