Jump to content

Use image from DOM data:image


Recommended Posts


i creating a game where a user can upload an image and later use it for play.

I did it in vannilajs and works good but now i'm using Phaser but i don't know how to do it.

Basically there is an input box where the user can select an image from the his computer. Once is selected there is a function that on load ended create a new Image() object (data:image/jpeg;base64) and start to load the canvas (game).

Now in standard html5 i was using drawImage passing the object and all was good.

With phaser i tried to load it in the preload for give it a key but give me an error for load the file.

I used this:  this.game.load.image('headrunner',runnerImg.src); where runnerImg is the image.


Also i need to "cut it" from a x to x1 and y to y1 (ideally i need an oval but not sure that i can do it so a rectangle for the first version can be good also). There is way? with drayImage i could put the x,x1,y,y1 and all was fine.


Thank you

Link to comment
Share on other sites

Ok I solve it.

I post it if someone else need it.


Basically in the loader i add the image directly to the cache adding a nul url and the dataimage


And about the crop i just created a rectangle with the coordinate that i needed and croped the sprited created before:

runnerhead.crop = new Phaser.Rectangle(imageData.x,rimageData.y,rimageData.x2 - rimageData.x,rimageData.y2 - rimageData.y);

Now i'm trying to do a circular crop but still is not working good..

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...