toDataURL() of webgl canvas returning transparent image [duplicate]

问题

This question already has answers here:

Canvas toDataURL() returns blank image (1 answer)

Why does my canvas go blank after converting to image? (2 answers)

Closed 4 years ago.

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?

回答1:

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

来源：https://stackoverflow.com/questions/31710748/todataurl-of-webgl-canvas-returning-transparent-image