Using preloaded image in non-Phaser DOM?

Phaser 3
1

Hi Everyone!

Just wondering whether it’s possible to pre-load images with Phaser, and then use the images in HTML <image> tags in a different, non-Phaser part of the codebase?

Thanks!

2

If you load in an image, you can access the data in Canvas-friendly form through myTexture.source[0].source . From there you should be able to use something like canvas.toDataURI() to get it in a form that can be used in an image tag.

3

Thanks @basstabs! - I didn’t know that.

My reason for asking this question is that I’m looking for a way to leverage Phaser’s preloader to load images for a DOM based UI. I’ve used Pixi’s resource loader (https://github.com/englercj/resource-loader) in the past to share preloaded images between the DOM and WebGL layers which is seamless. toDataURI is a very expensive call to make so may not be practical for my use case… but I will run some further experiments :smile:

4

You can use the data argument in the FILE_COMPLETE event.