Saving a screenshot on the device

How do I...?
1

The engine has functionality for creating and saving a screenshot of the game on the player’s device; it works for desktop operating systems Windows/macOS/Linux (example).
I would like to implement the ability to save for other devices as well (Web, Android, iOS).

  • For mobile devices, there are plugins for Cordova, using which you can save an image to the gallery. For example, the saveImageGallery plugin saves a Base64 png/jpg image on the device. Such a plugin must be connected to build the application and assembled by hand (I think online assembly will not help here).
  • For the web version of the game, I have not yet found information on whether this can be done. To download the image, you must first place it somewhere. Therefore, I believe that a server is needed that will save the screenshot and provide the user with a download link.

Can I get a screenshot (or sprite) from the Base64 code?
I would like to be prompted if I think correctly and if there are no other solutions (maybe someone has already done this), or am I wrong?

1 Like
2

For the Web, I practically found a solution. This code allows you to download a picture to the user’s computer (as if we were just downloading a file):

var a = document.createElement("a"); 
a.href = "data:image/png;base64,"+ imageBase64; 
a.download = "Image.png"; 
a.click();

If you insert a Base64 image into a variable, it works.
This function allows you to get Base64 from the Blob type:

const blobToBase64 = blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    return new Promise(resolve => {
    reader.onloadend = () => {
        resolve(reader.result);
    };
  });
};

Question: how to get an image from a sprite in the form of a Blob or Base64 at once?

3

Solution for Web:
Pixi has a function, the PIXI.CanvasExtract extraction manager, which allows you to get data from a render; to access it, you need to use the renderer.plugins.extract path.
There is a base64 function with parameters:

image
image979×376 42.3 KB

Pass sprite.getRendererObject().texture as the target parameter.

1 Like