Use image from DOM data:image

[{ESO}]

Hi,

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

[{ESO}]

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

this.game.cache.addImage('key',null,imageData);

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..

[rich]

The only way to do a circular crop is to use a mask. These are expensive (in terms of speed/power), so should be used sparingly to say the least, but they will do what you need.