canvas.toDataURL but just one portion of the screen

[omarojo]

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