imgエレメントの画像を表示(Phaser3)

やりたいこと
1. 使用例
実装
結果
参考にさせていただいたサイト

やりたいこと

imgエレメントに設定された画像をPhaser3上に表示します。

使用例

以下の記事にあるようにScreenCaptureを行うと、画像はimgエレメントで返却されます。

ScreenCaptureした画像を表示するにはこの記事で紹介する方法を行う必要があります。

実装

以下のようにimageエレメントからTextureを作成し、Textureに対してadd()でFrameを追加します。

作成したTextureは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)

結果

imgエレメントに設定された画像をPhaser3上に表示できました。

参考にさせていただいたサイト

Textures - Notes of Phaser 3