Pixi.js: getting base64 assets in the Texture Cache

Created on 2 Mar 2014 · 8Comments · Source: pixijs/pixi.js

Hiya I am trying to get base64 data from a jsonp file into the textureCache,
atm I am doing a sprite = PIXI.Sprite.fromImage(data.under, true)
where data is the jsop file and data.under is the part where the base64 string is at.

this works wonderfully, but I'd like a way of putting that texture in the cache, preferablu under a name like JSONPURL+'under',

because I have the feeling these base64 strings are slowing me down when I want to draw that asset multiple times

how does that work?

Source

NikkiKoole

Most helpful comment

Hi there!

You could create the image first and then add it to the cache manually?

var image = new Image();
image.src = myBase64ImageShibaz;

var myBaseTexture = new PIXI.BaseTexture(image);
var texture = new PIXI.Texture(myBaseTectute);

// then add to the cache (if required)
PIXI.Texture.addTextureToCache(texture, "someId");

// to retrieve the texture it would be a case of
var coolTexture = PIXI.Sprite.fromImage("someId");

hope that helps!

GoodBoyDigital on 2 Mar 2014

👍7

All 8 comments

They are going into the cache:

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/textures/Texture.js#L160

englercj on 2 Mar 2014

I've noticed that, but I don't know how to practically retrieve them from it.
their imageUrl is a huge string (the base64 version of the image)
atm I am trying to figure out how to save the texture under an alias in the textureCache

edit: looking a bit deeper into it, when I load an base64 image by doing a fromImage(data)
the same base64 string occurs four times in the data:
-key in textureCache
-baseTexture.imageUrl
-baseTexture.source.outerHTML
-baseTexture.source.src

and my goal (I think) is to lower those occurences, I try to rename the textureBlob to something smaller and probably the only place where it's needed is baseTexture.source.src

NikkiKoole on 2 Mar 2014

Hi there!

You could create the image first and then add it to the cache manually?

var image = new Image();
image.src = myBase64ImageShibaz;

var myBaseTexture = new PIXI.BaseTexture(image);
var texture = new PIXI.Texture(myBaseTectute);

// then add to the cache (if required)
PIXI.Texture.addTextureToCache(texture, "someId");

// to retrieve the texture it would be a case of
var coolTexture = PIXI.Sprite.fromImage("someId");

hope that helps!

GoodBoyDigital on 2 Mar 2014

👍7

that helped perfectly! thanks sir!

NikkiKoole on 2 Mar 2014

a pleasure :+1:

GoodBoyDigital on 2 Mar 2014

how do we get the base64 out of a texture?