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

michaeljherrmann · Aug 16, 2022 · c9e43d3 · c9e43d3
1 parent fdbdc45
commit c9e43d3
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 2 deletions.
diff --git a/packages/assets/src/loader/parsers/textures/loadTexture.ts b/packages/assets/src/loader/parsers/textures/loadTexture.ts
@@ -21,7 +21,7 @@ const validImages = ['jpg', 'png', 'jpeg', 'avif', 'webp'];
 export async function loadImageBitmap(url: string): Promise<ImageBitmap>
 {
     const response = await settings.ADAPTER.fetch(url);
-    const imageBlob =  await response.blob();
+    const imageBlob = await response.blob();
     const imageBitmap = await createImageBitmap(imageBlob);
 
     return imageBitmap;
@@ -42,7 +42,18 @@ export const loadTextures = {
 
     test(url: string): boolean
     {
-        return checkExtension(url, validImages);
+        let isValidBase64Suffix: boolean;
+
+        for (let i = 0; i < validImages.length; i++)
+        {
+            if (url.indexOf(`data:image/${validImages[i]}`) === 0)
+            {
+                isValidBase64Suffix = true;
+                break;
+            }
+        }
+
+        return isValidBase64Suffix || checkExtension(url, validImages);
     },
 
     async load(url: string, asset: LoadAsset<IBaseTextureOptions>, loader: Loader): Promise<Texture>

diff --git a/packages/assets/test/assets.tests.ts b/packages/assets/test/assets.tests.ts
@@ -333,4 +333,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);
+    });
 });