✨ feat: initial app

2026-09-02 14:18:35 +00:00 · 2026-05-10 03:06:54 +07:00
parent 23be44dbe0
commit d5b92cc9a4
95 changed files with 8104 additions and 0 deletions
@@ -0,0 +1,113 @@
+import { describe, expect, it, vi } from "vitest";
+import { renderFaceBlurRegions } from "./face-blur-renderer";
+
+function makeContext() {
+  return {
+    fillStyle: "",
+    filter: "none",
+    imageSmoothingEnabled: true,
+    fillRect: vi.fn(),
+    drawImage: vi.fn(),
+    save: vi.fn(),
+    restore: vi.fn(),
+  } as unknown as CanvasRenderingContext2D;
+}
+
+function makeImage(width = 1200, height = 800) {
+  return { naturalWidth: width, naturalHeight: height } as HTMLImageElement;
+}
+
+describe("renderFaceBlurRegions", () => {
+  it("renders gaussian blur region with source dimensions", () => {
+    const ctx = makeContext();
+    const image = makeImage();
+    renderFaceBlurRegions(
+      ctx,
+      image,
+      {
+        method: "gaussian",
+        amount: 24,
+        regions: [{ x: 120, y: 80, width: 300, height: 200, sourceWidth: 1200, sourceHeight: 800 }],
+      },
+      600,
+      400,
+    );
+
+    expect(ctx.save).toHaveBeenCalledOnce();
+    expect(ctx.filter).toBe("blur(24px)");
+    expect(ctx.drawImage).toHaveBeenCalledWith(image, 120, 80, 300, 200, 60, 40, 150, 100);
+    expect(ctx.restore).toHaveBeenCalledOnce();
+  });
+
+  it("renders pixelate using sampled offscreen canvas", () => {
+    const doc = globalThis.document;
+    expect(doc).toBeDefined();
+    if (!doc) return;
+    const ctx = makeContext();
+    const image = makeImage();
+    const sampleDrawImage = vi.fn();
+    const sampleCtx = { imageSmoothingEnabled: true, drawImage: sampleDrawImage } as unknown as CanvasRenderingContext2D;
+    const sampleCanvas = { width: 0, height: 0, getContext: vi.fn(() => sampleCtx) } as unknown as HTMLCanvasElement;
+    const nativeCreateElement = doc.createElement.bind(doc);
+    const createElement = vi.spyOn(doc, "createElement").mockImplementation((tagName: string) => {
+      if (tagName === "canvas") return sampleCanvas;
+      return nativeCreateElement(tagName);
+    });
+
+    renderFaceBlurRegions(
+      ctx,
+      image,
+      {
+        method: "pixelate",
+        amount: 10,
+        regions: [{ x: 200, y: 100, width: 160, height: 120, sourceWidth: 1200, sourceHeight: 800 }],
+      },
+      600,
+      400,
+    );
+
+    expect(sampleCanvas.width).toBe(16);
+    expect(sampleCanvas.height).toBe(12);
+    expect(sampleDrawImage).toHaveBeenCalledWith(image, 200, 100, 160, 120, 0, 0, 16, 12);
+    expect(ctx.drawImage).toHaveBeenCalledWith(sampleCanvas, 0, 0, 16, 12, 100, 50, 80, 60);
+    createElement.mockRestore();
+  });
+
+  it("renders censor with region color priority", () => {
+    const ctx = makeContext();
+    const image = makeImage();
+    renderFaceBlurRegions(
+      ctx,
+      image,
+      {
+        method: "censor",
+        amount: 20,
+        censorColor: "#ff0000",
+        regions: [{ x: 20, y: 30, width: 40, height: 50, sourceWidth: 1200, sourceHeight: 800, censorColor: "#00ff00" }],
+      },
+      600,
+      400,
+    );
+
+    expect(ctx.fillStyle).toBe("#00ff00");
+    expect(ctx.fillRect).toHaveBeenCalledWith(10, 15, 20, 25);
+  });
+
+  it("falls back to legacy region scaling when source dimensions are missing", () => {
+    const ctx = makeContext();
+    const image = makeImage(2400, 1600);
+    renderFaceBlurRegions(
+      ctx,
+      image,
+      {
+        method: "gaussian",
+        amount: 16,
+        regions: [{ x: 100, y: 120, width: 300, height: 200 }],
+      },
+      600,
+      400,
+    );
+
+    expect(ctx.drawImage).toHaveBeenCalledWith(image, 400, 480, 1200, 800, 100, 120, 300, 200);
+  });
+});