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`);