Create Data URL from a Phaser.BitmapData

[seejay92]

Hi guys,

 

I'm trying to save a Phaser.BitmapData object to the localstorage as part of a small painting app demo i am carrying out. I know it's possible to convert the entire game.canvas to a data URL via: 

game.canvas.toDataURL();

and save this string to localstorage, but is anything similar available for saving individual objects of BitmapData? - I've tried investigating the various properties of BitmapData, (imageData looked the most promising) to no avail, but I think (hope!) I'm just missing something fairly obvious.

 

Many thanks!

 

Cameron

 

 

[seejay92]

Hello again - I solved this one this morning with trial and error. From my limited knowledge - A bitmapdata object is made from PIXI.BaseTexture object, which can be (or is) a HTML canvas element. This means you can write:-

var data = this.bmd.baseTexture.sourcevar test = data.toDataURL();

and then save this test variable, which is a string, to localStorage. Once done, you could reload the game (assuming browser localStorage support) with:-

if(localStorage && localStorage.getItem("saveImage")){                this.load.image('savedImage', localStorage.getItem("saveImage"));                this.game.savedImage = true;                console.log("Found saved Image");            }

Allowing people to carry on with their drawing at a later date. I'm still fairly new to the coding scene, so code may not be optimized to the best of its ability, but hopefully this will help anyone with similar question or problem!