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

src/utils/Image.ts

@@ -14,20 +14,28 @@
  * 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) {
+        case "image/webp": {
             // Only extended file format WEBP images support animation, so grab the expected data range and verify header.
             // Based on https://developers.google.com/speed/webp/docs/riff_container#extended_file_format
             const arr = await blob.slice(0, 17).arrayBuffer();
@@ -41,7 +49,10 @@ export async function blobIsAnimated(mimeType: string, blob: Blob): Promise<bool
                 const animationFlagMask = 1 << 1;
                 return (flags & animationFlagMask) != 0;
             }
-    } else if (mimeType === "image/gif") {
+            break;
+        }
+
+        case "image/gif": {
             // 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);
@@ -72,5 +83,37 @@ export async function blobIsAnimated(mimeType: string, blob: Blob): Promise<bool
             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();
         });
     });
 });