Jump to content

Problem with Image Data URI for mobile devices


fitness23
 Share

Recommended Posts

This isn't to ask for help, but more of a suggestion for a fix in future Phaser versions, and maybe also a help to other Phaser Developers.

 

In my game I save a screenshot of the canvas and save it to the users local JSON sessionstorage to call upon later.

 

Now with that Image data URI saved I wanted to paste the image onto the screen, bearing in mind you need to cache the image first:

 

 

create: function () {

 

 

/* Caching START */
this.gameScreenshot01 = gameData.playerSettings[0].savedGames[0].screenshot;
this.gameScreenshot01Image = new Image();
this.gameScreenshot01Image.src = this.gameScreenshot01;
this.game.cache.addImage('image01', null, this.gameScreenshot01Image);
/* Caching END */

 

/* Now actually paste the image to the canvas START */

this.gameScreenShotInput = this.game.add.sprite(100, 100, 'image01');

/* Now actually paste the image to the canvas END */

 

 

 

},

 

 

 

Now this works great for desktop, but not mobile.

 

A fix for it I have found is that mobiles seem to have a problem caching it the first time. The fix? Cache it twice! BUT you have to do it among 2 different functions throughout the project and then paste the image to the canvas.

 

Hope that's helps anyone out there. My mobile is on IOS9, so maybe there were a few bugs out there at the beginning of this release.

 

 

Thanks :)

Link to comment
Share on other sites

Hi, you don't mention how you create your data URI as JSON to begin with.

 

I don't know if this helps in your case but I use this which automatically adds it to the image cache as well

 

http://phaser.io/docs/116/Phaser.BitmapData.html#generateTexture

generateTexture(key) → {PIXI.Texture}Creates a new Image element by converting this BitmapDatas canvas into a dataURL.The image is then stored in the image Cache using the key given.Finally a PIXI.Texture is created based on the image and returned.You can apply the texture to a sprite or any other supporting object by using either the key or the texture. //First call generateTexture:var texture = bitmapdata.generateTexture('ball');//Then you can either apply the texture to a sprite:game.add.sprite(0, 0, texture);//or by using the string based key:game.add.sprite(0, 0, 'ball');
Link to comment
Share on other sites

 

Hi, you don't mention how you create your data URI as JSON to begin with.

 

I don't know if this helps in your case but I use this which automatically adds it to the image cache as well

 

http://phaser.io/docs/116/Phaser.BitmapData.html#generateTexture

generateTexture(key) → {PIXI.Texture}Creates a new Image element by converting this BitmapDatas canvas into a dataURL.The image is then stored in the image Cache using the key given.Finally a PIXI.Texture is created based on the image and returned.You can apply the texture to a sprite or any other supporting object by using either the key or the texture. //First call generateTexture:var texture = bitmapdata.generateTexture('ball');//Then you can either apply the texture to a sprite:game.add.sprite(0, 0, texture);//or by using the string based key:game.add.sprite(0, 0, 'ball');

 

 

 

Hi there,

 

I do it like this:

/* Save a screenshot of their current game START */var currentGameContainer = document.getElementById("game");var actualCanvas = currentGameContainer.firstElementChild;var dataImageURL = actualCanvas.toDataURL("image/jpeg", 0.5);                gameData.playerSettings[0].savedGames[0].screenshot = dataImageURL;console.log(dataImageURL);/* Save a screenshot of their current game END */                sessionStorage.setItem("savedGamedata", JSON.stringify(gameData));

You're suggestion might work but it would only work in that session. My intention later it to convert it over to localstorage so even if the user closes all their windows down, the game will remember your last set of games (and screenshots).

 

Thanks for your help though :)

Link to comment
Share on other sites

but generateTexture generates the data URI I think.. so presumably you can therefore store it to the cache automatically and take the result and JSON it? unless you don't want it in the cache yet

 

anyway i was mostly wondering if this method fixes your double-cache issue.

 

(broken code.. ignore!)

// excluded code to capture the screen as bitmapdata// then...var texture = bitmapdata.generateTexture('image01');gameData.playerSettings[0].savedGames[0].screenshot = texture;sessionStorage.setItem("savedGamedata", JSON.stringify(gameData));

Link to comment
Share on other sites

hmm ok I could be wrong.. it returns this object... I was going off the docs, sorry

b.Texture {noFrame: false, baseTexture: b.BaseTexture, frame: c.Rectangle, trim: undefined, valid: true…}

you can use this though

var img = bitmapdata.baseTexture.sourcevar dataURL = img.toDataURL();

so i guess

var img = bitmapdata.baseTexture.sourcevar dataImageURL = img.toDataURL();gameData.playerSettings[0].savedGames[0].screenshot = dataImageURLsessionStorage.setItem("savedGamedata", JSON.stringify(gameData));texture = bitmapdata.generateTexture('image01'); // store to cache

similar to what you're doing, but i'm wondering if it fixes the cache issue.

 

oh and i'm being slightly unnecessary.. you can just use

var dataImageURL = bitmapdata.canvas.toDataURL();
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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