Save game screenshot

[kiwi]

Hi,

 

I saw this question have been asked many times but unfortunately I didn't found a correct answer. I'm trying to save a base64 image taken from the canvas. If the game is running on canvas, no problem instead if in webgl I got a blank screen. In the forum I found this piece of code:

if(this.game.renderer instanceof PIXI.CanvasRenderer){            var url = this.game.canvas.toDataURL('image/png');            console.log(url);        }else if(this.game.renderer instanceof PIXI.WebGLRenderer){            var gl = this.game.renderer.gl;            var buf = new Uint8Array(this.game.width * this.game.height * 4);            gl.readPixels(0, 0, this.game.width, this.game.height, gl.RGBA, gl.UNSIGNED_BYTE, buf);            console.log(buf);        }

If I log the buf variable it's an array of bytes and I'm trying to have a base64 string. Can anyone help me please?

 

Thanks

[drhayes]

It sounds dumb, but I'm pretty sure you can iterate through the contents of the array, concatting them together into a string, then call the browser's btoa function to convert it to a base64 string.

 

StackOverflow has you covered: http://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string

[kiwi]

thanks for your quick answer. I was actually trying that method but the base64 string apparently it's not a valid one. :/

[kiwi]

this is what I'm currently using:

                function _arrayBufferToBase64( buffer ) {                    var binary = '';                    var bytes = new Uint8Array( buffer );                    var len = bytes.byteLength;                    for (var i = 0; i < len; i++) {                        binary += String.fromCharCode( bytes[ i ] );                    }                    return window.btoa( binary );                }                                                var gl = this.game.renderer.gl;                var buf = new Uint8Array(this.game.width * this.game.height * 4);                gl.readPixels(0, 0, this.game.width, this.game.height, gl.RGBA, gl.UNSIGNED_BYTE, buf);                var base64 = _arrayBufferToBase64(buf);

At the beginning I used data data:image/jpeg;base64,  and  data:image/png;base64, but the image doens't render on browser. There is the broken image placeholder

Can anyone of you try this code and let me know if works for you?

 

thanks

[chg]

this is what I'm currently using:

...

At the beginning I used data data:image/jpeg;base64 and data:image/png;base64 but the image doens't render on browser. There is the broken image placeholder

Can anyone of you try this code and let me know if works for you?

thanks

You've got an array of raw pixel data, it's not encoded as a JPEG (JFIF/EXIF) nor PNG file and the pixel data doesn't contain any kind of header at all describing what's what (inside the array as you've got it there's not even a hint of how many numbers represent a row of pixel data)... so you can't just convert it to base 64 and expect the browser to understand it.

If this was for me, I might be tempted to write my own routine to affix the appropriate image header, etc. but I may be insane like that. If you go down that path I suspect .bmp may be the easiest to wrangle (I think most browsers support it, but if you might need to view the image rather than just saving it to disk you may want to checkthis) though PNG should be doable but will be more work [ See answers here: http://stackoverflow.com/questions/7942635/write-png-quickly ]

Less insane might be to look for library code to do the conversion, or loop through the array blitting it pixel by pixel use putImageData() blt the data to a 2D canvas... if you do this you might want to fall back to doing this only if the webgl canvas reallyhas no toDataURL() method (ie. check if it's present and is a function, if it's there try calling it inside a try block, maybe some browsers implement it, or will at some point)

EDIT / Postscript: As an aside, this topic made me recall "Wolf 5K" a very old (pre-canvas, circa 2002) HTML/javascript FPS which dynamically created XBM images to display every frame...