From 851a0f4a14b630a63d511efded39b70b169c29e8 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Sat, 21 Mar 2026 00:14:16 -0700
Subject: [PATCH] Fix: Harden decode + PNG fallback

---
 test.html | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 115 insertions(+), 1 deletion(-)

diff --git a/test.html b/test.html
index aee4727..6e2d89c 100644
--- a/test.html
+++ b/test.html
@@ -250,6 +250,115 @@
       try { return JSON.stringify(err); } catch { return String(err); }
     }
 
+    function toHexByte(n) {
+      return n.toString(16).padStart(2, "0");
+    }
+
+    function detectSignature(bytes) {
+      const b = bytes;
+      if (b.length >= 3 && b[0] === 0xFF && b[1] === 0xD8 && b[2] === 0xFF) return "jpeg";
+      if (b.length >= 8 && b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4E && b[3] === 0x47 && b[4] === 0x0D && b[5] === 0x0A && b[6] === 0x1A && b[7] === 0x0A) return "png";
+      if (b.length >= 12 && b[0] === 0x52 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x46 && b[8] === 0x57 && b[9] === 0x45 && b[10] === 0x42 && b[11] === 0x50) return "webp";
+      if (b.length >= 6 && b[0] === 0x47 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x38 && (b[4] === 0x37 || b[4] === 0x39) && b[5] === 0x61) return "gif";
+      if (b.length >= 12 && b[4] === 0x66 && b[5] === 0x74 && b[6] === 0x79 && b[7] === 0x70) return "mp4/heic-ish";
+      return "unknown";
+    }
+
+    async function inspectImageFile(file) {
+      const head = new Uint8Array(await file.slice(0, 16).arrayBuffer());
+      return {
+        name: file.name,
+        size: file.size,
+        mime: file.type || "(empty)",
+        signature: detectSignature(head),
+        magicHex: [...head].map(toHexByte).join(" ")
+      };
+    }
+
+    async function tryDecodeWithImageBitmap(blob) {
+      const bmp = await createImageBitmap(blob);
+      const info = { width: bmp.width, height: bmp.height };
+      bmp.close?.();
+      return info;
+    }
+
+    function loadImgFromBlob(blob) {
+      return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
+        img.onload = () => {
+          URL.revokeObjectURL(url);
+          resolve(img);
+        };
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          reject(new Error("HTMLImageElement failed to decode."));
+        };
+        img.src = url;
+      });
+    }
+
+    function canvasToBlob(canvas, type = "image/png", quality = 0.92) {
+      return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+          if (!blob) return reject(new Error("Canvas toBlob returned null."));
+          resolve(blob);
+        }, type, quality);
+      });
+    }
+
+    async function normalizeInputImage(file) {
+      const meta = await inspectImageFile(file);
+      appendLog("input meta:", meta);
+
+      if (/^\.pending-/i.test(file.name)) {
+        appendLog("warn:", "filename looks like temp/incomplete download:", file.name);
+      }
+
+      try {
+        const info = await tryDecodeWithImageBitmap(file);
+        appendLog("decode ok via createImageBitmap:", info);
+        return { blob: file, transcode: false };
+      } catch (bitmapErr) {
+        appendLog("createImageBitmap decode failed:", formatErr(bitmapErr));
+      }
+
+      try {
+        const img = await loadImgFromBlob(file);
+        const canvas = document.createElement("canvas");
+        canvas.width = img.naturalWidth || img.width;
+        canvas.height = img.naturalHeight || img.height;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) throw new Error("Could not create 2D canvas context.");
+        ctx.drawImage(img, 0, 0);
+
+        const pngBlob = await canvasToBlob(canvas, "image/png", 0.92);
+        appendLog("fallback transcode success:", {
+          fromMime: file.type || "(empty)",
+          toMime: pngBlob.type,
+          toSize: pngBlob.size,
+          width: canvas.width,
+          height: canvas.height
+        });
+
+        try {
+          const verify = await tryDecodeWithImageBitmap(pngBlob);
+          appendLog("verify transcoded decode ok:", verify);
+        } catch (verifyErr) {
+          appendLog("verify transcoded decode failed:", formatErr(verifyErr));
+          throw verifyErr;
+        }
+
+        return { blob: pngBlob, transcode: true };
+      } catch (imgErr) {
+        appendLog("img/canvas fallback failed:", formatErr(imgErr));
+      }
+
+      throw new Error(
+        `Input image could not be decoded. name="${meta.name}", mime="${meta.mime}", signature="${meta.signature}", magic="${meta.magicHex}". Try a fully downloaded PNG/JPEG/WebP.`
+      );
+    }
+
     el.clear.addEventListener("click", clearResults);
     el.clearLog.addEventListener("click", () => { el.log.textContent = ""; });
 
@@ -287,6 +396,11 @@
           const file = files[i];
           setStatus(`processing ${i + 1}/${files.length}: ${file.name} ...`);
 
+          const normalized = await normalizeInputImage(file);
+          if (normalized.transcode) {
+            appendLog("input was transcoded to PNG for stability:", file.name);
+          }
+
           const config = {
             debug: true,
             output: {
@@ -303,7 +417,7 @@
 
           appendLog("calling removeBackground for:", file.name);
           const started = performance.now();
-          const outBlob = await removeBackground(file, config);
+          const outBlob = await removeBackground(normalized.blob, config);
           const ms = Math.round(performance.now() - started);
           appendLog("done:", file.name, `in ${ms}ms`, `blob=${outBlob.type} ${outBlob.size} bytes`);