Search the Community

Hello everyone! I'm trying to accomplish the following task: - When there is a change of state I want to take a screenshot of the canvas, show to the user while the state is changing. Now I read that I should use canvas.toDataURL to obtain the base64 encoded Image. I can't understand the steps to accomplish this task. 1) I save the URL with canvas.toDataURL(). 2) I should convert the base64 to an image right? 3) I should add the Image to the cache OR i Should do a load.image? 4) The operation should be async right? Because in my trying the debugger console is saying that the image hasn't been retrieved and I don't understand how I can make toDataURL (or the conversion from base64 to png) async because there are no methods. Thanks for the help!

Okay so I figured out how to generate a base64 image out of the canvas, send that base64 string through the network and save it in the server using NodeJS. Now the question is: How to take a screenshot ( .toDataURL( ) ) from just a specific section or phaser group, not the entire canvas. So someone told me in the PixiJs forum that I would need to create a extra canvas, add the content there and then generate the base64 data again using .toDataURL only to that temp canvas. So this is what I am doing. crop:function(){ var copyText = this.photos.generateTexture(1,this.game.renderer); var copy = new Phaser.Sprite(this.game,0,0,copyText); var graph = new Phaser.Rectangle(0,0, 175,300); copy.cropRect = graph; copy.updateCrop(); // copy.scale.setTo (0.5,0.5); //Scale the sprite, this could be useful later var second_game = new Phaser.Game(175, 300, Phaser.CANVAS, 'second_game'); second_game.preserveDrawingBuffer = true; second_game.add.existing(copy); this.postImage(second_game); //Generates the base64 image }As you can see.. I create a second_canvas, and add a cropped sprite to the canvas, but it doesn't add anything. When I take the screenshot its all black, and even the html element on screen is black. Why is it not rendering anything ??? I've tested this without the second canvas.. and the sprites gets added to the original game canvas properly cropped. The problem is the second_canvas that doesn't show anything. I also tried no specifing the html element in the second game constructor: new Phaser.Game(175, 300, Phaser.CANVAS); I heard you can't have 2 phaser instances in the same page, unless they are using CANVAS as the renderer. So my main game is running Phaser.AUTO (WebGL) and the second_game in running Phaser.CANVAS postImage Function postImage: function(s_game){var image64 = s_game.canvas.toDataURL('image/png');console.log(image64);$.ajax({ url: 'http://localhost:3000/kente' dataType: 'json', type: 'post', contentType: 'application/json', data: JSON.stringify( { "image64": image64}), processData: false, success: function( data, textStatus, jQxhr ){ console.log(JSON.stringify( data ) ); }, error: function( jqXhr, textStatus, errorThrown ){ console.log( errorThrown ); }});}ohh.. and Im also getting this in the console Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'b.Sprite._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.DisplayObjectContainer._renderCanvas @ phaser.min.js:3b.CanvasRenderer.renderDisplayObject @ phaser.min.js:5b.CanvasRenderer.render @ phaser.min.js:5c.Game.updateRender @ phaser.min.js:9c.Game.update @ phaser.min.js:9c.RequestAnimationFrame.updateRAF @ phaser.min.js:14c.RequestAnimationFrame.start.window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:14