How to take screenshot of game div in phaser

Question

I am using this code now, but it returns a blank transparent image:

$(document).ready(function(){
    $("#t").click(function() {
        html2canvas(document.querySelector("#bracelet_maker"), 
         { onrendered: function(canvas){ 
            src = canvas.toDataURL();
            window.open(src); } });
    });
});

If I use game.canvas.toDataUrl(); it returns a black image.

This is how the game is started in #bracelet_maker div

var game = new Phaser.Game(width,height,Phaser.AUTO,"bracelte_canvas",{
    preload:preload,
    create:create,
    update:update  });

score 1 · Accepted Answer · answered Jul 06 '17 at 15:41

1

Using Phaser.AUTO will allow either Phaser.WEBGL or Phaser.CANVAS be used, depending upon what your browser supports.

If you switch over to Phaser.CANVAS when creating your new Phaser.Game you should be able to use access the canvas.

For example, within Phaser by binding off the S key:

function create() {
    // ...
    var screenshotKey = game.input.keyboard.addKey(Phaser.Keyboard.S);
    screenshotKey.onDown.add(function () { window.open(game.canvas.toDataURL()); 
}

There's also preserveDrawingBuffer which should allow you capture from WebGL as well, but it needs to be set early on in the process.

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
    preload: preload, create: create, update: update
});
game.preserveDrawingBuffer = true;

answered Jul 06 '17 at 15:41

James Skemp

8,018
9
64
107

James Skemp thanx alot bro – Adnan Dani Jul 07 '17 at 12:06
Good answer. Just wanted to add that in FireFox or Chrome you can also just right-click in the canvas and choose "save image as" from pop-up menu. – BdR Jul 07 '17 at 12:07
how to save this image in sql database ?? – Adnan Dani Jul 07 '17 at 12:56
@AdnanDani Glad the answer could help! Your SQL question is probably a good separate question to ask, since generally that would be done outside of JavaScript. Your click function would probably want to do a POST to a page (written in PHP, .NET, Ruby, etcetera) that then interacts with your database. See https://stackoverflow.com/a/8412554/11912 You might also leverage some sort of web service instead. So, it really depends upon the backend logic you're using. Beyond that, storing that string would probably be sufficient, but it of course also depends upon how you're going to use it later. – James Skemp Jul 08 '17 at 01:48

How to take screenshot of game div in phaser

1 Answers1