Displaying the image from the img element (Phaser3)

Things I want to do
1. Example of use
implementation
Result
Websites I used as references

Things I want to do

This displays the image set in the “ element on Phaser3.

Example of use

As shown in the article below, when you perform a ScreenCapture, the image is returned as an img element.

To view a screenshot, you need to follow the methods described in this article.

implementation

Create a texture from an image element as shown below, and then add a frame to the texture using add().

The texture you create can be added to the scene as an image.

let image // this is image element // for example get by document.getElementById(), snapshot
let texture = new Phaser.Textures.Texture(this.textures, "resultimage", image);
texture.add("frame", 0, 0, 0, image.width, image.height);

this.add.image(width, height , texture)

Result

I was able to display the image set in the img element on Phaser3.

Websites I used as references

Textures - Notes of Phaser 3