in-game screenshot

Recommended Posts

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?

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

Any input is appreciated.

Share this post

Link to post
Share on other sites

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);


Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.