2

We are developing a sample three.js application which shows a thumbnail. For any scene that we create, we require to take a screenshot of the canvas, for this purpose, we are using canvas.toDataURL("image/png"). For repeated invocations of the above function, it returns the same black image, despite elements being added to the canvas.

We are using WebGLRenderer and threejs r99

Live Canvas canvas.toDataURL()

I am using google chrome and threejs. Since the canvas context will be made by threejs itself, I cannot add that parameter (preserveDrawingBuffer) shown in the question Canvas toDataURL() returns blank image only in Firefox

Chintan Jagad
  • 115
  • 2
  • 2
  • 7
  • you don't have to add that parameter. Other solutions were given. Plus, even if you you can't directly add that parameter you can indirectly add it. Will update other answer – gman Jan 28 '19 at 09:43
  • This question helped to fight against racism more than what you can imagine! P.S: I stumbled upon this question by simply searching for "black image" in Google to change my social media profile picture to support the "Black Lives Matter" movement! This is the first picture... – Michel Gokan Khan Jun 03 '20 at 12:24

1 Answers1

1

When you are calling WebGLRenderer, pass preserveDrawingBuffer:true. Here are list of parameters which you can configure.

Laxmikant Dange
  • 7,606
  • 6
  • 40
  • 65