feat: add watermark, text overlay, and image composition tools

Add 4 watermark/overlay tools with API routes and frontend settings: - watermark-text: SVG text overlay with tiling, position, opacity, rotation - watermark-image: logo/image watermark with position, opacity, scale - text-overlay: styled text on images with shadow and background box - compose: layer images with position, opacity, and blend modes
2026-08-03 07:46:42 +02:00 · 2026-03-22 04:20:26 +08:00
parent c41d046316
commit aeaf783ee4
8 changed files with 988 additions and 0 deletions
@@ -0,0 +1,105 @@
+import { z } from "zod";
+import { createToolRoute } from "../tool-factory.js";
+import sharp from "sharp";
+import type { FastifyInstance } from "fastify";
+
+const settingsSchema = z.object({
+  text: z.string().min(1).max(500),
+  fontSize: z.number().min(8).max(200).default(48),
+  color: z.string().regex(/^#[0-9a-fA-F]{6}$/).default("#000000"),
+  opacity: z.number().min(0).max(100).default(50),
+  position: z
+    .enum(["center", "top-left", "top-right", "bottom-left", "bottom-right", "tiled"])
+    .default("center"),
+  rotation: z.number().min(-360).max(360).default(0),
+});
+
+function hexToRgba(hex: string, opacity: number): string {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r},${g},${b},${opacity / 100})`;
+}
+
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
+export function registerWatermarkText(app: FastifyInstance) {
+  createToolRoute(app, {
+    toolId: "watermark-text",
+    settingsSchema,
+    process: async (inputBuffer, settings, filename) => {
+      const image = sharp(inputBuffer);
+      const metadata = await image.metadata();
+      const width = metadata.width ?? 800;
+      const height = metadata.height ?? 600;
+      const rgba = hexToRgba(settings.color, settings.opacity);
+      const escapedText = escapeXml(settings.text);
+
+      let svgOverlay: string;
+
+      if (settings.position === "tiled") {
+        // Create tiled watermark
+        const spacingX = settings.fontSize * 6;
+        const spacingY = settings.fontSize * 4;
+        let textElements = "";
+        for (let y = 0; y < height + spacingY; y += spacingY) {
+          for (let x = 0; x < width + spacingX; x += spacingX) {
+            textElements += `<text x="${x}" y="${y}" font-size="${settings.fontSize}" fill="${rgba}" font-family="sans-serif" transform="rotate(${settings.rotation},${x},${y})">${escapedText}</text>`;
+          }
+        }
+        svgOverlay = `<svg width="${width}" height="${height}">${textElements}</svg>`;
+      } else {
+        // Single watermark at specified position
+        let x: number, y: number;
+        let anchor = "middle";
+        const pad = settings.fontSize;
+
+        switch (settings.position) {
+          case "top-left":
+            x = pad;
+            y = pad + settings.fontSize;
+            anchor = "start";
+            break;
+          case "top-right":
+            x = width - pad;
+            y = pad + settings.fontSize;
+            anchor = "end";
+            break;
+          case "bottom-left":
+            x = pad;
+            y = height - pad;
+            anchor = "start";
+            break;
+          case "bottom-right":
+            x = width - pad;
+            y = height - pad;
+            anchor = "end";
+            break;
+          case "center":
+          default:
+            x = width / 2;
+            y = height / 2;
+            anchor = "middle";
+            break;
+        }
+
+        svgOverlay = `<svg width="${width}" height="${height}">
+          <text x="${x}" y="${y}" font-size="${settings.fontSize}" fill="${rgba}" font-family="sans-serif" text-anchor="${anchor}" transform="rotate(${settings.rotation},${x},${y})">${escapedText}</text>
+        </svg>`;
+      }
+
+      const svgBuffer = Buffer.from(svgOverlay);
+      const result = await image.composite([{ input: svgBuffer, top: 0, left: 0 }]);
+      const buffer = await result.toBuffer();
+
+      return { buffer, filename, contentType: "image/png" };
+    },
+  });
+}