User uploaded image into canvas

Phaser 3
1

Hi. Does anyone know of any tutorials on how to upload an image from a users hard drive and/or web cam into Phaser? I’ve looked around and found info for general javascript but not Phaser.

2

Upload a file means a server needs to handle this uploaded file. But most phaser games runs on client side. You can run phaser on server side for multiplayer games, but i don’t think it will handle file upload out of the box.

3

@BlunT76 I don’t think this is the case. There are a lot of examples of people uploading images to a canvas without any server side scripting such as this:

http://jsfiddle.net/influenztial/qy7h5/

I’m wondering how to handle it with Phaser.

4

From that demo code,

  1. Once local image is selected, event.target.result will return a data uri of that image.
  2. Using an Image element to load it
  3. Draw image to a canvas element

Phaser3 dose not support load image from uri now, thus you can’t use loader to load uri.
Here is a solution of using built-in canvas texture to load image from uri.

Or here is another solution using 3rd party plugin – canvas.

  • canvas.loadFromURL(url) or
  • canvas.loadFromURLPromise(url)

Canvas plugin can display image already, if you need to share this image as a normal image/sprite, use canvas.generateTexture(key) to save this image to texture manger.

2 Likes
5

i was totally wrong, sorry :slight_smile:

6

Here is an example of loading image to canvas game object, from local file.

Local file is selected via phaser3’s built-in DOM game object, then load image uri to a canvas game object.

Edit: It is better to have a ‘file-input’ game object extended from DOM game object for reusing, but I had not made that plugin yet.