Loading .JFIF images dynamically

Help & Support
1

Im working on a facebook game that retrieves user photos from the facebook graph api - all images come as .JFIF format which throws “format not recognized” on Playcanvas if using the loader.

So far I’ve been working on a hack where I load the url into an img, draw it into a canvas, turn it into a base64, and then turn into a texture… and now researching how I apply the texture to an UI element… but is there a better way?

Any tips appreciated, thanks

2

I made it work but I feel dirty X-)

function urlToTexture( name, callback )
    {
        var img             = new Image();
        img.crossOrigin     = 'Anonymous';
        
        urlToBase64();
        
        function urlToBase64()
        {
            img.src = name;
            
            img.onload = function() 
            {
                var canvas      = document.createElement( 'CANVAS' );
                var ctx         = canvas.getContext( '2d' );
                canvas.height   = this.naturalHeight;
                canvas.width    = this.naturalWidth;

                ctx.drawImage( this, 0, 0 );
 
                base46ToTexture( canvas.toDataURL( "image/png" ) );
            };
        }
        
        function base46ToTexture( base64 )
        {
            var asset                 = new pc.Texture( this.app.graphicsDevice, { mipmaps: false });
            asset.minFilter        = pc.FILTER_LINEAR;
            asset.magFilter       = pc.FILTER_LINEAR;
            asset.addressU      = pc.ADDRESS_CLAMP_TO_EDGE;
            asset.addressV      = pc.ADDRESS_CLAMP_TO_EDGE;

            img.src                   = base64;
            
            img.onload = ( e ) => 
            {
                asset.setSource( img );
                callback( asset );
            };  
        }
    };

Example use case

urlToTexture( "https://graph.facebook.com/2987348204665901/picture?type=normal", function( texture)
{
    self.element.texture = texture;
})
1 Like
3

From a quick search, it’s basically a jpg so it’s possible to add a new asset loader to handle this extension. I think I have an example on the forum somewhere where I did this :thinking:

Edit: here it is Load texture with generic file extension at runtime

1 Like