toDataURL() of webgl canvas returning transparent image

Question

I can't get toDataUrl() to work. Here's my code where I'm trying to get an image of the canvas and use it as the source of an existing image element.

var canvas = document.getElementById('glcanvas');
canvas.setAttribute('crossOrigin','anonymous');
var img = document.getElementById('imageToShowCanvas');
img.src = canvas.toDataURL();

What imageToShowCanvas is showing is a broken url. When I console.log the result of my call to toDataUrl() I get a link showing a transparent image with the height and width of the canvas.

I've heard of cors problems causing issues like this but I'm using chrome with –allow-file-access-from-files flag and there aren't any security errors in the console. Is there an easier way to get a screenshot of my webGl canvas?

Do you have `preserveDrawingBuffer` enabled, what browser are you using? — LJᛃ, Jul 29 '15 at 22:51
This answer also likely covers it. http://stackoverflow.com/a/26790802/128511 — gman, Jul 31 '15 at 08:44

score 7 · Answer 1 · answered Aug 01 '15 at 16:58

7

Thank you LJ, I just needed to enable the preserveDrawingBuffer flag when getting the webGl context. Screenshots are now working perfectly!

answered Aug 01 '15 at 16:58

Chris Oppedal

373
2
3
11

2

Nice! Also If you're using THREE.js you can add the flag to your render like this: new THREE.WebGLRenderer({preserveDrawingBuffer: true }); – Dustin Silk Dec 19 '16 at 13:02

toDataURL() of webgl canvas returning transparent image

1 Answers1

Linked