in-game screenshot

[xKapi]

Hello guys!

So I have a game which is using phaser.CANVAS and what I'm trying to do is the following:
When a button is clicked on a particular state, a certain region of the canvas is captured and then displayed it on the canvas at a given location.

I've been able to capture the entire canvas using toDataURL() but how do I work with this imageURI?

Difficulties: 
- Cropping the image
- Displaying the image without preloading (the image has just been captured)
- Saving the image for future use

Any input is appreciated.
-Kapi

[xKapi]

Ok so I figured out how to do all of that. Only problem is loading async. It works perfectly on browser but doesn't work in mobile.

canvasData = this.game.canvas.toDataURL();
data = new Image();
data.src = canvasData;
this.game.cache.addImage('image-data', canvasData, data);
var image = this.game.add.image(135, 220, 'image-data');
var cam_x = this.input.x - 105;
var cam_y = this.input.y - 140;
var cropRect = new Phaser.Rectangle(cam_x, cam_y, 210, 280);
image.crop(cropRect);	

-Kapi 

[drhayes]

Your desktop is fooling you 'cuz it's fast. Loading an image, even from a data URL, is an async operation. The only sure-fire way to handle it correctly is to assign an onload handler to the image that inserts the now-present image into the cache and *then* adds it to the world.