Add support for base64 images with Assets (pixijs#8559)

michaeljherrmann · Aug 9, 2022 · d38270f · d38270f
1 parent a344b58
commit d38270f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/packages/assets/src/loader/parsers/loadTexture.ts b/packages/assets/src/loader/parsers/loadTexture.ts
@@ -46,7 +46,18 @@ export const loadTextures = {
         const tempURL = url.split('?')[0];
         const extension = tempURL.split('.').pop();
 
-        return validImages.includes(extension);
+        let isValidBase64Suffix: boolean;
+
+        for (let i = 0; i < validImages.length; i++)
+        {
+            if (url.indexOf(`data:image/${validImages[i]}`) === 0)
+            {
+                isValidBase64Suffix = true;
+                break;
+            }
+        }
+
+        return isValidBase64Suffix || validImages.includes(extension);
     },
 
     async load(url: string, asset: LoadAsset<LoadTextureData>, loader: Loader): Promise<Texture>

diff --git a/packages/assets/test/assets.tests.ts b/packages/assets/test/assets.tests.ts
@@ -334,4 +334,32 @@ describe('Assets', () =>
 
         expect(assets.bunny.baseTexture).toBe(null);
     });
+
+    it('should load PNG base64 assets', async () =>
+    {
+        // Other formats (JPG, JPEG, WEBP, AVIF) can be added similarly.
+        let bunnyBase64 = `
+        data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBggGBQkIBwgKCQkKDRYODQwMDRoTFBAWHxwhIB8c
+        Hh4jJzIqIyUvJR4eKzssLzM1ODg4ISo9QTw2QTI3ODX/2wBDAQkKCg0LDRkODhk1JB4kNTU1NTU1NTU1NTU1NTU1NTU1NTU1NT
+        U1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTX/wgARCAAlABoDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABgUHBP/E
+        ABkBAAMBAQEAAAAAAAAAAAAAAAIDBAUBBv/aAAwDAQACEAMQAAAAfoMjG9G5byxWYwUHfPaNTTmebMAqZ1zJphvFntQwkNP49f
+        dWrUdeIEs1xcBAWmGH/8QANRAAAQMCBAQDAg8AAAAAAAAAAgEDBAURAAYSEwcUIWEQFSIxUjI0NkJFVFVicXWBoqTCw//aAAgB
+        AQABPwDiRsHGobM3rBfqoBKb+abaNOlYk/Eb4qz8Cmee0mhjsQpnJIwywC7J6XV5nsl27It/h4y6xSIHEFlnLjLLEN+mPG8DCa
+        BMxcZ037oh+Gd810nMgQIlIkrKciTleds0aBoRp0LoappLqSexcMsTtp0xjPSmWiu6+KtiLaGSoKKikirbsmMpVFqhV2NLqLjp
+        gEN5g3WoxuKpkTCp6ARVS+2eEz7lv7bgB9x19AMeyivVFxxGyrScswoE6jxliPvz9o7PHo0K06VkBV0j1HFAybCqFGalSTdU3e
+        vpW1sUygRJ+fjo07dditRX3LA8bSqYG0KLcFRfYZYHIGWg+g4B93GdZfqS9Vxxk+T9J/M/8H8QuKjNBY5BX4jmz7xpcMZCqPm3
+        EMZmtHN+myTund1jw4zhbIwzvqEsH9Hv3Qm/74oFO8oy5TqfubvKRWmNdratIoN7YyRTdji/mj1/E9f8lxHv228P/8QAHxEAAg
+        IDAAMBAQAAAAAAAAAAAQIAAwQREgUQIRRR/9oACAECAQE/AL2CoWJi5VfJJaY1osJ0dzqZ1qikgwVJYpcHWp426sM4Hydj+zMr
+        U0kzGwBbV0TPHY6qz7nCzL+0tqUfqRNBfk8cGBfv1YNrqARF0xPr/8QAHhEAAgICAwEBAAAAAAAAAAAAAQIAAxESBBAhMTL/2g
+        AIAQMBAT8AQEnAgqckSxWA9646HfML6kLOUjEAzQyh23xLeQVbAl9hKjE3Mp/Yli1M32cnGAB0h9hhPnX/2Q==
+        `;
+
+        // to prevent eslint  max-len warning
+        bunnyBase64 = bunnyBase64.replace(/\s/g, '');
+
+        Assets.add('bunny', bunnyBase64);
+        const bunny = await Assets.load('bunny');
+
+        expect(bunny).toBeInstanceOf(Texture);
+    });
 });