Phaser Screenshot - WEBGL Issue

[JesusJoseph]

Hi,

Thanks for reading.

In my phaser game I need to share the screenshot of the game. Its working perfectly in CANVAS mode but its not working in WEBGL mode.

I use the below code to get the screenshot and convert to base64 image.

var gl = SequentialTap.game.renderer.gl;
var buf = new Uint8Array(SequentialTap.game.width * SequentialTap.game.height * 4);
gl.readPixels(0, 0, SequentialTap.game.width, SequentialTap.game.height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

// Covert Buffer Array to Base64 Image
var binary = '';
var bytes = new Uint8Array(buf);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
	binary += String.fromCharCode(bytes[i]);
}
base64Image = window.btoa(binary);

But the output (base64Image in below code) is generated as below. But this value is not the base64 image format

AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wA...8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/AAAA/wAAAP8AAAD/

In CANVAS mode I am getting the below output, which is working correctly.

data:image/png;base64,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

Can someone please tell me how I can fix the issue with the WEBGL mode.

 

Thanks for your help.

 

Thanks

Joseph

Edited October 11, 2016 by JesusJoseph

[JesusJoseph]

Hi All,

I try to use html2canvas to get create the screenshot. But working correctly in Chrome or IE  but its not working in andorid tablet.

This is the code that I use to get the screenshot, which is still producing blank image

html2canvas(document.querySelector("canvas"), {
            onrendered: function(canvas) {
                base64Image = canvas.toDataURL();
                document.getElementById("content").innerHTML = base64Image;
                shareScreenshot(base64Image, callback);
            }
        });

Any help will be highly appricated.

 

thanks

Joseph

[JesusJoseph]

I couldn't find a way to fix it. 

I am using text sharing when its WEBGL.

If anybody find any answers please shared it here. Thanks for your help.

[samme]

Try

var bmd = game.add.bitmapData(game.width, game.height);
  
game.world.updateTransform();

bmd.drawFull(game.world);
  
var tx = game.make.renderTexture(bmd.width, bmd.height);
tx.render(bmd.addToWorld());
tx.getBase64();

http://codepen.io/anon/pen/YGrLyg?editors=0010