Add support for Animated (A)PNG (#8158)

src/utils/Image.ts

@@ -14,62 +14,105 @@
  * limitations under the License.
  */
 
+import { arrayHasDiff } from "./arrays";
+
 export function mayBeAnimated(mimeType: string): boolean {
-    return ["image/gif", "image/webp"].includes(mimeType);
+    return ["image/gif", "image/webp", "image/png", "image/apng"].includes(mimeType);
 }
 
 function arrayBufferRead(arr: ArrayBuffer, start: number, len: number): Uint8Array {
     return new Uint8Array(arr.slice(start, start + len));
 }
 
+function arrayBufferReadInt(arr: ArrayBuffer, start: number): number {
+    const dv = new DataView(arr, start, 4);
+    return dv.getUint32(0);
+}
+
 function arrayBufferReadStr(arr: ArrayBuffer, start: number, len: number): string {
     return String.fromCharCode.apply(null, arrayBufferRead(arr, start, len));
 }
 
 export async function blobIsAnimated(mimeType: string, blob: Blob): Promise<boolean> {
-    if (mimeType === "image/webp") {
+    switch (mimeType) {
-        // Only extended file format WEBP images support animation, so grab the expected data range and verify header.
+        case "image/webp": {
-        // Based on https://developers.google.com/speed/webp/docs/riff_container#extended_file_format
+            // Only extended file format WEBP images support animation, so grab the expected data range and verify header.
-        const arr = await blob.slice(0, 17).arrayBuffer();
+            // Based on https://developers.google.com/speed/webp/docs/riff_container#extended_file_format
-        if (
+            const arr = await blob.slice(0, 17).arrayBuffer();
-            arrayBufferReadStr(arr, 0, 4) === "RIFF" &&
+            if (
-            arrayBufferReadStr(arr, 8, 4) === "WEBP" &&
+                arrayBufferReadStr(arr, 0, 4) === "RIFF" &&
-            arrayBufferReadStr(arr, 12, 4) === "VP8X"
+                arrayBufferReadStr(arr, 8, 4) === "WEBP" &&
-        ) {
+                arrayBufferReadStr(arr, 12, 4) === "VP8X"
-            const [flags] = arrayBufferRead(arr, 16, 1);
+            ) {
-            // Flags: R R I L E X _A_ R (reversed)
+                const [flags] = arrayBufferRead(arr, 16, 1);
-            const animationFlagMask = 1 << 1;
+                // Flags: R R I L E X _A_ R (reversed)
-            return (flags & animationFlagMask) != 0;
+                const animationFlagMask = 1 << 1;
-        }
+                return (flags & animationFlagMask) != 0;
-    } else if (mimeType === "image/gif") {
+            }
-        // Based on https://gist.github.com/zakirt/faa4a58cec5a7505b10e3686a226f285
+            break;
-        // More info at http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
-        const dv = new DataView(await blob.arrayBuffer(), 10);
-
-        const globalColorTable = dv.getUint8(0);
-        let globalColorTableSize = 0;
-        // check first bit, if 0, then we don't have a Global Color Table
-        if (globalColorTable & 0x80) {
-            // grab the last 3 bits, to calculate the global color table size -> RGB * 2^(N+1)
-            // N is the value in the last 3 bits.
-            globalColorTableSize = 3 * Math.pow(2, (globalColorTable & 0x7) + 1);
         }
 
-        // move on to the Graphics Control Extension
+        case "image/gif": {
-        const offset = 3 + globalColorTableSize;
+            // Based on https://gist.github.com/zakirt/faa4a58cec5a7505b10e3686a226f285
+            // More info at http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
+            const dv = new DataView(await blob.arrayBuffer(), 10);
 
-        const extensionIntroducer = dv.getUint8(offset);
+            const globalColorTable = dv.getUint8(0);
-        const graphicsControlLabel = dv.getUint8(offset + 1);
+            let globalColorTableSize = 0;
-        let delayTime = 0;
+            // check first bit, if 0, then we don't have a Global Color Table
+            if (globalColorTable & 0x80) {
+                // grab the last 3 bits, to calculate the global color table size -> RGB * 2^(N+1)
+                // N is the value in the last 3 bits.
+                globalColorTableSize = 3 * Math.pow(2, (globalColorTable & 0x7) + 1);
+            }
 
-        // Graphics Control Extension section is where GIF animation data is stored
+            // move on to the Graphics Control Extension
-        // First 2 bytes must be 0x21 and 0xF9
+            const offset = 3 + globalColorTableSize;
-        if ((extensionIntroducer & 0x21) && (graphicsControlLabel & 0xF9)) {
+
-            // skip to the 2 bytes with the delay time
+            const extensionIntroducer = dv.getUint8(offset);
-            delayTime = dv.getUint16(offset + 4);
+            const graphicsControlLabel = dv.getUint8(offset + 1);
+            let delayTime = 0;
+
+            // Graphics Control Extension section is where GIF animation data is stored
+            // First 2 bytes must be 0x21 and 0xF9
+            if ((extensionIntroducer & 0x21) && (graphicsControlLabel & 0xF9)) {
+                // skip to the 2 bytes with the delay time
+                delayTime = dv.getUint16(offset + 4);
+            }
+
+            return !!delayTime;
         }
 
-        return !!delayTime;
+        case "image/png":
+        case "image/apng": {
+            // Based on https://stackoverflow.com/a/68618296
+            const arr = await blob.arrayBuffer();
+            if (arrayHasDiff([
+                0x89,
+                0x50, 0x4E, 0x47,
+                0x0D, 0x0A,
+                0x1A,
+                0x0A,
+            ], Array.from(arrayBufferRead(arr, 0, 8)))) {
+                return false;
+            }
+
+            for (let i = 8; i < blob.size;) {
+                const length = arrayBufferReadInt(arr, i);
+                i += 4;
+                const type = arrayBufferReadStr(arr, i, 4);
+                i += 4;
+
+                switch (type) {
+                    case "acTL":
+                        return true;
+                    case "IDAT":
+                        return false;
+                }
+                i += length + 4;
+            }
+            break;
+        }
     }
 
     return false;

src/utils/blobs.ts

@@ -52,6 +52,7 @@ const ALLOWED_BLOB_MIMETYPES = [
     'image/jpeg',
     'image/gif',
     'image/png',
+    'image/apng',
     'image/webp',
 
     'video/mp4',

test/Image-test.ts

@@ -29,7 +29,10 @@ describe("Image", () => {
             expect(mayBeAnimated("image/webp")).toBeTruthy();
         });
         it("image/png", async () => {
-            expect(mayBeAnimated("image/png")).toBeFalsy();
+            expect(mayBeAnimated("image/png")).toBeTruthy();
+        });
+        it("image/apng", async () => {
+            expect(mayBeAnimated("image/apng")).toBeTruthy();
         });
         it("image/jpeg", async () => {
             expect(mayBeAnimated("image/jpeg")).toBeFalsy();
@@ -37,25 +40,36 @@ describe("Image", () => {
     });
 
     describe("blobIsAnimated", () => {
-        const animatedGif = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.gif"))]);
-        const animatedWebp = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.webp"))]);
-        const staticGif = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.gif"))]);
-        const staticWebp = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.webp"))]);
-
         it("Animated GIF", async () => {
-            expect(await blobIsAnimated("image/gif", animatedGif)).toBeTruthy();
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.gif"))]);
+            expect(await blobIsAnimated("image/gif", img)).toBeTruthy();
         });
 
         it("Static GIF", async () => {
-            expect(await blobIsAnimated("image/gif", staticGif)).toBeFalsy();
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.gif"))]);
+            expect(await blobIsAnimated("image/gif", img)).toBeFalsy();
         });
 
         it("Animated WEBP", async () => {
-            expect(await blobIsAnimated("image/webp", animatedWebp)).toBeTruthy();
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.webp"))]);
+            expect(await blobIsAnimated("image/webp", img)).toBeTruthy();
         });
 
         it("Static WEBP", async () => {
-            expect(await blobIsAnimated("image/webp", staticWebp)).toBeFalsy();
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.webp"))]);
+            expect(await blobIsAnimated("image/webp", img)).toBeFalsy();
+        });
+
+        it("Animated PNG", async () => {
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.apng"))]);
+            expect(await blobIsAnimated("image/png", img)).toBeTruthy();
+            expect(await blobIsAnimated("image/apng", img)).toBeTruthy();
+        });
+
+        it("Static PNG", async () => {
+            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.png"))]);
+            expect(await blobIsAnimated("image/png", img)).toBeFalsy();
+            expect(await blobIsAnimated("image/apng", img)).toBeFalsy();
         });
     });
 });