three.js toDataURL PNG is black

Question

I'm trying to grab a screenshot with renderer.domElement.toDataURL("image/png"), and save it to a file. The image is the right size, but it's black. I have preserveDrawingBuffer turned on.

I think I'm decoding and saving the file correctly, because when I hexdump it I can see the correct initial characters for the PNG format, as well as the IHDR and IDAT chunk headers. However the closing IEND is missing.

Any known issues here? Hints? Windows 7/Firefox up to date if it matters.

Thanks... (Sorry if this is dumb, I'm very new to three.js)

Have you looked at http://stackoverflow.com/questions/16431318/webgl-single-frame-screenshot-of-webgl — gaitat, May 13 '13 at 11:29

score 1 · Answer 1 · answered May 13 '13 at 15:34

1

I had somewhat similar problems with Windows 7/Firefox. PNG Data URL's would be randomly truncated or something, much shorter than a successful PNG export. Trying to set that data url as image src resulted in "Image corrupt" exception or something in FF. As little sense it makse, setting a small window.setTimeout (10ms) between rendering and getting the data URL helped in my case. Maybe Firefox needs a rest from the JS engine before it refreshes some canvas internal state or something.. weird.

answered May 13 '13 at 15:34

yaku

3,061
2
19
38

Thanks!! I agree it looks like the PNG's are being truncated. I have fairly large ones, like 300K, and even with a delay of 1 sec I didn't see them reliably completing. I did see them get to the IEND chunk a few times but the images were still black. Cf. below I gave up and used JPGs instead. – Bathsheba May 14 '13 at 04:09
I have a repro here: http://jsfiddle.net/u3tHa/. A bunch of canvases are created, an image url is extracted, loaded into an img tag, then copied to a canvas to check the final color. When I load the fiddle in Forefox on the first run a lot of the final canvases are black. – Frank Schwieterman Nov 27 '13 at 21:55

score 0 · Answer 2 · answered May 14 '13 at 04:07

I switched to JPG format (smaller files => truncation less of an issue?) and still saw it not working, then I tried this tip which I found here

If you want to save data that is derived from a Javascript canvas.toDataURL() function, you have to convert blanks into plusses. If you do not do that, the decoded data is corrupted:
 <?php
      $encodedData = str_replace(' ','+',$encodedData);
      $decodedData = base64_decode($encodedData);
 ?>

This worked. Thanks, Mekal.

This tip seems to apply to JPGs only. I saw PNGs decoding correctly without the + replacement, and corruptly with it. I can use JPGs so my personal problem is solved. However I never saw a PNG that wasn't black even when decoded correctly and not truncated.

Kind of a lousy situation either way, I feel like. What is up with the +'s?

score 0 · Answer 3 · answered May 27 '13 at 21:36

A black texture is a sign that you did not indicate the texture needs to be updated.

Also, you do not need to use canvas.toDataURL(). You can pass in the canvas reference to the THREE.Texture object.

var canvas = document.getElementById('#myCanvas');

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

// Now render the scene

three.js toDataURL PNG is black

3 Answers3

Linked