Creating a screenshot from a camera and giving the user a downloadable image in browser

Hello! I'm making a character builder for WebGL, and I know that it's possible to send a camera's render to a texture to create an image of an in-game screenshot, but I don't know how to save that image somewhere (whether it be using the browser's temporary data, or using AWS S3, or anything) and then giving back the link to download it, all from a button click. I get how it works at a high level, but I really need some help with how to actually code and set up saving the image, storing it, and giving it back as something downloadable.

There's an asset that does a lot of what I want to be able to do: https://renderheads.itch.io/annotator-demo?secret=9P4hzPUhbS7D6OpuDwyYynZaBFY
but it has too much extra stuff on it, like the annotation and drawing stuff. I just want to be able to generate a screenshot similar to that without giving the user the controls over drawing on top of, and without displaying all the debug data that that has.

 

Hi, have you found an answer to this problem. I want to do the same think.

 

So, I've found a solution for that.
First of all you have to activate the preserveDrawingBuffer for your game instance.

Code (JavaScript):

1.  
2. var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {onProgress: UnityProgress,
3.   Module: {
4.     webglContextAttributes: {"preserveDrawingBuffer": true},
5.   }
6. });

After that the rendered image of the canvas is wirtten into the DrawingBuffer and you can simply get it by using the function .toDataURL() of your canvas. You can setup different file formats and quality settings for this function if you want (https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL)
So create an <a> Tag in html and a click evnt listener for it in JavaScript like that:

Code (HTML):

1.  
2. <a class="" id="btn_download-screenshot" download="myScreenshot.jpg">
3.               Screenshot
4. </a>
5.  

Code (JavaScript):

1. $("#btn_download-screenshot").on('click',function(){
2.       var dataUrl = document.getElementById('gameContainer').childNodes[0].toDataURL("image/jpeg", 1.0);
3.       $(this).attr('href', dataUrl);
4.     });
5.