fix(media): "Compress image" no longer blackens transparent images or freezes animations (#331)

Compression re-encodes through a canvas to JPEG. Only PNG was skipped,
so a transparent WebP came out on a black background, and an animated
GIF or WebP became one still frame. GIF and APNG are no longer offered;
an animated WebP (VP8X animation flag) or any image with a transparent
pixel is kept as the original.

Fixes #331

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/utils/imageCompression.ts

@@ -8,11 +8,32 @@ export type CompressionResult = {
   height: number;
 };
 
-// Any raster image the browser can render to canvas can be compressed to JPEG.
-// SVG is vector and must stay as-is; GIF animation is lost on canvas but static
-// frames compress fine. Empty type string (undetected MIME) is excluded.
+// Raster images the browser can render to canvas can be compressed to JPEG.
+// SVG is vector and must stay as-is. [Gitea #331] GIF and APNG are usually
+// animated, and a canvas keeps only the first frame, so they aren't offered.
+// Empty type string (undetected MIME) is excluded.
+const NOT_COMPRESSIBLE = new Set(['image/svg+xml', 'image/gif', 'image/apng']);
 const isCompressibleType = (type: string): boolean =>
-  type.startsWith('image/') && type !== 'image/svg+xml' && type !== '';
+  type.startsWith('image/') && !NOT_COMPRESSIBLE.has(type);
+
+/**
+ * Pure: whether a WebP file is animated. An animated WebP is a VP8X file
+ * whose header has the animation flag (byte 20, bit 0x02) and an ANIM chunk.
+ */
+export function isAnimatedWebp(bytes: Uint8Array): boolean {
+  const ascii = (at: number, len: number) => String.fromCharCode(...bytes.subarray(at, at + len));
+  if (bytes.length < 21 || ascii(0, 4) !== 'RIFF' || ascii(8, 4) !== 'WEBP') return false;
+  // Bit 0x02 of the VP8X flags byte (no-bitwise: test it arithmetically).
+  return ascii(12, 4) === 'VP8X' && Math.floor(bytes[20] / 2) % 2 === 1;
+}
+
+/** Pure: whether RGBA pixel data has any pixel that isn't fully opaque. */
+export function hasTransparency(rgba: Uint8ClampedArray): boolean {
+  for (let i = 3; i < rgba.length; i += 4) {
+    if (rgba[i] !== 255) return true;
+  }
+  return false;
+}
 
 /** Returns true if this file can be compressed via canvas (any raster image type). */
 export function isCompressible(file: File | Blob): boolean {
@@ -28,7 +49,8 @@ const JPEG_OUTPUT_TYPE = 'image/jpeg';
  *
  * PNG is skipped entirely: it may carry an alpha channel, and re-encoding to
  * JPEG composites transparency onto an opaque (black) background, corrupting the
- * image. Returning null makes callers fall back to uploading the lossless
+ * image. Any other image with transparent pixels, and animated WebP, are left
+ * alone for the same reason (#331). Returning null makes callers fall back to uploading the lossless
  * original. The image is decoded with `imageOrientation: 'from-image'` so any
  * EXIF orientation is baked into the pixels instead of being silently dropped.
  */
@@ -39,6 +61,15 @@ export async function compressImage(
   if (!isCompressibleType(file.type)) return null;
   // Skip PNG (potential alpha) — re-encoding to JPEG would flatten transparency.
   if (file.type === 'image/png') return null;
+  // [Gitea #331] An animated WebP would become a single still frame.
+  if (file.type === 'image/webp') {
+    try {
+      const head = new Uint8Array(await file.slice(0, 32).arrayBuffer());
+      if (isAnimatedWebp(head)) return null;
+    } catch {
+      return null;
+    }
+  }
 
   let bitmap: ImageBitmap;
   try {
@@ -60,6 +91,13 @@ export async function compressImage(
   }
   ctx.drawImage(bitmap, 0, 0);
   bitmap.close();
+  // [Gitea #331] JPEG has no alpha: a transparent WebP (sticker, logo) came out
+  // with a black background. Keep any image with transparency as the original.
+  try {
+    if (hasTransparency(ctx.getImageData(0, 0, width, height).data)) return null;
+  } catch {
+    return null;
+  }
 
   return new Promise((resolve) => {
     canvas.toBlob(