Copy tile image into data:image string?

Phaser 3
1
  • There are a number of HTML elements.
  • There is a tilemap that uses a tileset.
  • I can get specific tile coordinates in the tileset image using tileset.getTileTextureCoordinates(tileNumber).

Does anyone know how I can extract tileset image data for a tile into a “data:image/png” (base64) form?

2

Got it! :partying_face:

I used this page on textures as a reference:
https://rexrainbow.github.io/phaser3-rex-notes/docs/site/texture/

Then I used this code to turn the tileset image into a spritesheet and pull out data:

this.load.spritesheet('tile-icons', '/assets/tilemaps/test_tileset.png', {frameWidth: 32, frameHeight:32, margin: 0, spacing: 2});
iconData = this.textures.getBase64('tile-icons', 0, 'image/png');
document.getElementById('custom-image).src = iconData;