How can I create a texture from a blob?

[a-c-sreedhar-reddy]

Hi all.

How can I create a texture from a blob url?

One way is to create an image element with the blob url and then create a texture. But the issue is since the image loading is asynchronous we can not use the image immediately after setting the blob url. So is there any other way to achieve this?

 

Edited May 28, 2021 by a-c-sreedhar-reddy

[b10b]

https://pixijs.download/dev/docs/PIXI.Texture.html#from

For the blob scenario it's a helper function to ImageResource which uses the same async methods you describe (image.src + image.onload).

https://pixijs.download/v5.1.2/docs/packages_core_src_textures_resources_ImageResource.js.html

So what's the alternative?

Custom write a blob to pixel data parser in Javascript (to replicate the inbuilt image.src + image.onload methods).  Then you have the option to run it synchronous and wait for completion by blocking the main thread.

However ...

Such a parser will likely be much slower than the native browser method and could easily be slow enough to create noticeable side effects.  Those new issues may be worse than the imposed delay of the inbuilt asynchronous method (which by design won't block the main thread).

My advice, embrace the async.  Preload where you can, use the Pixi loader and resource classes by default.  And for more specialised on-demand scenarios use a placeholder texture and swap it out when the onLoad completes.