[SOLVED] Load a texture using base64 data string

Hi there,

I’m having a problem with downloading textures from a remote server. Actually it can be broken into two issues:

  1. My images URLs ends with …mydomain.com/getImage?path=remote/images/duck.png - Play Canvas code treats “.com/getImage” as a file extension (unknown file extension) and doesn’t let me use this file as a texture.

  2. That would be fine if I could, as an alternative, just use the standard base64-encoded pngs. But I cannot make this work ;). I tried this.app.assets.loadFromUrl, tried pc.Asset constructor with ‘url’ param - both didn’t work.

Is there any proper way to create/initialize a Texture/Asset using base64-encoded png file?

Check this, it doesn’t provide a code sample but the logic is sound and I can confirm it is working:

  • You need to download your image and create a pc.Texture. Here is a sample on how to manually create a pc.Texture from a remote source (it uses a video source, but using an Img element would be the same):
    https://developer.playcanvas.com/en/tutorials/video-textures/

  • Then create manually a pc.Asset of type “texture” and assign your custom pc.Texture to it.

1 Like

Thanks man, it works very well.

Here’s the typescript sample, if anybody’s wondering how to do it:

        let tex = new pc.Texture( this.app.graphicsDevice, {
            mipmaps: false
        } );

        tex.minFilter = pc.FILTER_LINEAR;
        tex.magFilter = pc.FILTER_LINEAR;
        tex.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
        tex.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

        let img = document.createElement( 'img' );
        img.src = base64Data;
        img.crossOrigin = 'anonymous';
        img.onload = ( e ) => {
            tex.setSource( img );
            this.entity.element.width = tex.width;
            this.entity.element.height = tex.height;
            this.entity.element.texture = tex;
        };
4 Likes