Forums » Help » snipping tool

hello. Is it possible to take a user print screen, than use some kind of tool (like snipping tool from windows) to cut a small image from that print screen and use it as a JPG or another type file in a game? or knowing that all screen is 16:9 (or onother size) somehow create an image from location 8:7 for an example and use it as a picture. thank you.

You can have the user upload/drag and drop an image into your game. From there you can load the image into a canvas and allow them to edit the image. Technically you can edit it/ crop it without the user interaction, but it would he close to impossible to guarantee you are corrected. This would also allow the user to upload any image, since you couldn't be 100% sure that they are uploading a screen shot.

If you want to simple save part of the game screen as an image and the edit that, you can also do that very easily, but it sounded like you wanted a screen shot that included outside of the browser.

hi. i need only what is on the browser. the page will setup the way that the picture has a specific location. and the size of that picture will be specific. so what i need is to have that picture cropped into game area.
**********
* ! ! *
*P1 ! ! *
* ! ! *
* ! P2 ! *
* ! ! *
* ! ! *
***********
where P1 is picture from the browser screen , and P2 is a print screen of that picture in a game field.

*******
P1.....!.......!.........
..........!.......!.........
..........!.......!.........
..........!...P2!.........
..........!.......!.........
..........!.......!.........
********
where ! is a border of the game area

Hi Constantine.

As far as I know, JavaScript cannot screenshot an area outside the game canvas, such as HTML content surrounding your game. You can only take screenshots of the canvas itself.

ok. in this case what do i need and what should i use to get it done?

The current canvas image is always available to you at ig.system.canvas.

For example:

console.log(ig.system.canvas.toDataURL());

What do you want to do with that image exactly?

hi. that is going to be my first project. i have some experience in python, but i am not sure that i can do it there. or my knowledge is not capable to do it.

my idea was to capture that picture at some point after lunching the game and use it in the game as a background or interactive object.

that is the way how i am thinking:
usually a graphic objects for the game located in a folder during development. i was thinking to reserve a spot in the game canvas and put that object after the staring the game.

You can capture the image of game canvas and set it as a base64 encoded string. From there you can set that string to the src of an image element on the page or the background image of any block level html element.

I wrote ,a few years ago, a FB plugin that captured the game screen when the main character died to post it to FB. Somewhat morbid, but funny. I also made a dressup game where you could save the game screen, crop the character out then save it to the server gallery. It's all very possible, just need some JS knowledge.

hi stillen.
i need something like that but in reverse.
crop died character into game canvas.

If you can get the base64 encoded image data, you can reimport that back into the game. I did a Tic Tac Toe game using the Facebook API to get your friends profile picture. Saved the image back into the game, then you have to match 3 friends in a row to get points. The issue you run into is that you can't preload the image or anything like that, so you need to update/make a custom entity that can reference the hidden image/base64 image data. You can pass that info/image src to the entry in a function.
It may be better, depending on your project and how often you would use this image, to save the image to the server and reference that way. I guess it really depends on scope.

Why you want to print screen of user?

that print screens are going to be a part of the game. user will interact with it.