tonetheman's blog

phaser3 data uri for images

So if you want to use a data uri as a texture in phaser3 this is how you do it.

You need to create an Image in Javascript (this is not a Phaser3 Image) Once it loads you create a Phaser3 texture and "draw" the Javascript Image onto it.

let img = new Image();  //1
img.onload = () => {
  const canvasTexture = scene.textures.createCanvas(
    "star",
    img.width,
    img.height
  );
  const ctx = canvasTexture.getContext();
  ctx.drawImage(img, 0, 0);
  canvasTexture.refresh();
  this.events.emit("tony:ready");
};

An example https://codepen.io/tonetheman/pen/ExMGLBG

What is a data uri https://en.wikipedia.org/wiki/Data_URI_scheme

Javascript Image (MDN) https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Good Phaser3 information here https://www.html5gamedevs.com/topic/39888-why-phaser-3-dont-allow-loading-data-uri/