From c4d298ac3ef5a4302afc782e0aa425b447a94980 Mon Sep 17 00:00:00 2001 From: Siddharth Kumar Sah Date: Mon, 13 Apr 2026 11:43:16 +0800 Subject: [PATCH] feat(stitch): add grid layout, alignment, border, radius, quality, and new resize modes --- apps/api/src/routes/tools/stitch.ts | 296 +++++++++++++++++++++------- tests/integration/api.test.ts | 125 ++++++++++++ 2 files changed, 351 insertions(+), 70 deletions(-) diff --git a/apps/api/src/routes/tools/stitch.ts b/apps/api/src/routes/tools/stitch.ts index 0cd0f555..a0951471 100644 --- a/apps/api/src/routes/tools/stitch.ts +++ b/apps/api/src/routes/tools/stitch.ts @@ -12,14 +12,19 @@ import { createWorkspace } from "../../lib/workspace.js"; const MAX_CANVAS_PIXELS = 100_000_000; const settingsSchema = z.object({ - direction: z.enum(["horizontal", "vertical"]).default("horizontal"), - resize: z.enum(["fit", "original"]).default("fit"), - gap: z.number().min(0).max(100).default(0), + direction: z.enum(["horizontal", "vertical", "grid"]).default("horizontal"), + gridColumns: z.number().int().min(2).max(10).default(2), + resizeMode: z.enum(["fit", "original", "stretch", "crop"]).default("fit"), + alignment: z.enum(["start", "center", "end"]).default("center"), + gap: z.number().min(0).max(200).default(0), + border: z.number().min(0).max(50).default(0), + cornerRadius: z.number().min(0).max(50).default(0), backgroundColor: z .string() .regex(/^#[0-9a-fA-F]{6}$/) .default("#FFFFFF"), format: z.enum(["png", "jpeg", "webp"]).default("png"), + quality: z.number().min(1).max(100).default(90), }); function parseHexColor(hex: string): { r: number; g: number; b: number } { @@ -30,6 +35,12 @@ function parseHexColor(hex: string): { r: number; g: number; b: number } { }; } +interface PreparedImage { + buffer: Buffer; + width: number; + height: number; +} + export function registerStitch(app: FastifyInstance) { app.post("/api/v1/tools/stitch", async (request, reply) => { const files: Array<{ buffer: Buffer; filename: string }> = []; @@ -65,7 +76,6 @@ export function registerStitch(app: FastifyInstance) { return reply.status(400).send({ error: "At least 2 images are required for stitching" }); } - // Validate all files and decode HEIC/HEIF for (const file of files) { const validation = await validateImageBuffer(file.buffer); if (!validation.valid) { @@ -89,7 +99,6 @@ export function registerStitch(app: FastifyInstance) { } try { - // Read metadata for all images const imageMetas = await Promise.all( files.map(async (file) => { const meta = await sharp(file.buffer).metadata(); @@ -101,85 +110,80 @@ export function registerStitch(app: FastifyInstance) { }), ); - // Resize images if needed const isHorizontal = settings.direction === "horizontal"; - let prepared: Array<{ buffer: Buffer; width: number; height: number }>; + const isGrid = settings.direction === "grid"; - if (settings.resize === "fit") { - if (isHorizontal) { - // Find min height, scale taller images down - const minHeight = Math.min(...imageMetas.map((m) => m.height)); - prepared = await Promise.all( - imageMetas.map(async (img) => { - if (img.height > minHeight) { - const scaledWidth = Math.round((img.width * minHeight) / img.height); - const resized = await sharp(img.buffer).resize(scaledWidth, minHeight).toBuffer(); - return { buffer: resized, width: scaledWidth, height: minHeight }; - } - return img; - }), - ); - } else { - // Find min width, scale wider images down - const minWidth = Math.min(...imageMetas.map((m) => m.width)); - prepared = await Promise.all( - imageMetas.map(async (img) => { - if (img.width > minWidth) { - const scaledHeight = Math.round((img.height * minWidth) / img.width); - const resized = await sharp(img.buffer).resize(minWidth, scaledHeight).toBuffer(); - return { buffer: resized, width: minWidth, height: scaledHeight }; - } - return img; - }), - ); - } + let prepared: PreparedImage[]; + + if (isGrid) { + prepared = await prepareForGrid(imageMetas, settings); + } else if (isHorizontal) { + prepared = await prepareForHorizontal(imageMetas, settings.resizeMode); } else { - prepared = imageMetas; + prepared = await prepareForVertical(imageMetas, settings.resizeMode); } - // Calculate canvas dimensions - const n = prepared.length; let canvasWidth: number; let canvasHeight: number; + const composites: sharp.OverlayOptions[] = []; - if (isHorizontal) { - canvasWidth = prepared.reduce((sum, img) => sum + img.width, 0) + settings.gap * (n - 1); - canvasHeight = Math.max(...prepared.map((img) => img.height)); + if (isGrid) { + const cols = Math.min(settings.gridColumns, prepared.length); + const rows = Math.ceil(prepared.length / cols); + const cellWidth = Math.max(...prepared.map((img) => img.width)); + const cellHeight = Math.max(...prepared.map((img) => img.height)); + + canvasWidth = cols * cellWidth + (cols - 1) * settings.gap + 2 * settings.border; + canvasHeight = rows * cellHeight + (rows - 1) * settings.gap + 2 * settings.border; + + for (let i = 0; i < prepared.length; i++) { + const col = i % cols; + const row = Math.floor(i / cols); + const img = prepared[i]; + + const cellLeft = settings.border + col * (cellWidth + settings.gap); + const cellTop = settings.border + row * (cellHeight + settings.gap); + + const left = cellLeft + alignOffset(cellWidth, img.width, settings.alignment); + const top = cellTop + alignOffset(cellHeight, img.height, settings.alignment); + + composites.push({ input: img.buffer, left, top }); + } + } else if (isHorizontal) { + const totalImgWidth = prepared.reduce((sum, img) => sum + img.width, 0); + const maxHeight = Math.max(...prepared.map((img) => img.height)); + + canvasWidth = totalImgWidth + (prepared.length - 1) * settings.gap + 2 * settings.border; + canvasHeight = maxHeight + 2 * settings.border; + + let offset = settings.border; + for (const img of prepared) { + const top = settings.border + alignOffset(maxHeight, img.height, settings.alignment); + composites.push({ input: img.buffer, left: offset, top }); + offset += img.width + settings.gap; + } } else { - canvasWidth = Math.max(...prepared.map((img) => img.width)); - canvasHeight = prepared.reduce((sum, img) => sum + img.height, 0) + settings.gap * (n - 1); + const maxWidth = Math.max(...prepared.map((img) => img.width)); + const totalImgHeight = prepared.reduce((sum, img) => sum + img.height, 0); + + canvasWidth = maxWidth + 2 * settings.border; + canvasHeight = totalImgHeight + (prepared.length - 1) * settings.gap + 2 * settings.border; + + let offset = settings.border; + for (const img of prepared) { + const left = settings.border + alignOffset(maxWidth, img.width, settings.alignment); + composites.push({ input: img.buffer, left, top: offset }); + offset += img.height + settings.gap; + } } - // Canvas size check if (canvasWidth * canvasHeight > MAX_CANVAS_PIXELS) { return reply.status(422).send({ error: `Canvas too large: ${canvasWidth}x${canvasHeight} (${Math.round((canvasWidth * canvasHeight) / 1_000_000)}MP exceeds 100MP limit)`, }); } - // Build composites const background = parseHexColor(settings.backgroundColor); - const composites: sharp.OverlayOptions[] = []; - let offset = 0; - - for (const img of prepared) { - let left: number; - let top: number; - - if (isHorizontal) { - left = offset; - top = Math.round((canvasHeight - img.height) / 2); - offset += img.width + settings.gap; - } else { - left = Math.round((canvasWidth - img.width) / 2); - top = offset; - offset += img.height + settings.gap; - } - - composites.push({ input: img.buffer, left, top }); - } - - // Create canvas and composite let pipeline = sharp({ create: { width: canvasWidth, @@ -189,16 +193,41 @@ export function registerStitch(app: FastifyInstance) { }, }).composite(composites); - // Output in requested format if (settings.format === "jpeg") { - pipeline = pipeline.jpeg({ quality: 90 }); + pipeline = pipeline.jpeg({ quality: settings.quality }); } else if (settings.format === "webp") { - pipeline = pipeline.webp({ quality: 90 }); + pipeline = pipeline.webp({ quality: settings.quality }); } else { pipeline = pipeline.png(); } - const result = await pipeline.toBuffer(); + let result = await pipeline.toBuffer(); + + if (settings.cornerRadius > 0) { + const meta = await sharp(result).metadata(); + const w = meta.width!; + const h = meta.height!; + const r = Math.min(settings.cornerRadius, Math.floor(Math.min(w, h) / 2)); + + const mask = Buffer.from( + ``, + ); + + result = await sharp(result) + .ensureAlpha() + .composite([{ input: mask, blend: "dest-in" }]) + .png() + .toBuffer(); + + if (settings.format === "jpeg") { + result = await sharp(result) + .flatten({ background: { r: background.r, g: background.g, b: background.b } }) + .jpeg({ quality: settings.quality }) + .toBuffer(); + } else if (settings.format === "webp") { + result = await sharp(result).webp({ quality: settings.quality }).toBuffer(); + } + } const jobId = randomUUID(); const workspacePath = await createWorkspace(jobId); @@ -220,3 +249,130 @@ export function registerStitch(app: FastifyInstance) { } }); } + +function alignOffset(containerSize: number, itemSize: number, alignment: string): number { + if (alignment === "start") return 0; + if (alignment === "end") return containerSize - itemSize; + return Math.round((containerSize - itemSize) / 2); +} + +async function prepareForHorizontal( + images: PreparedImage[], + resizeMode: string, +): Promise { + if (resizeMode === "original") return images; + + const minHeight = Math.min(...images.map((m) => m.height)); + + return Promise.all( + images.map(async (img) => { + if (img.height === minHeight && resizeMode === "fit") return img; + + if (resizeMode === "fit") { + const scaledWidth = Math.round((img.width * minHeight) / img.height); + const resized = await sharp(img.buffer).resize(scaledWidth, minHeight).toBuffer(); + return { buffer: resized, width: scaledWidth, height: minHeight }; + } + + if (resizeMode === "stretch") { + const resized = await sharp(img.buffer) + .resize(img.width, minHeight, { fit: "fill" }) + .toBuffer(); + return { buffer: resized, width: img.width, height: minHeight }; + } + + if (resizeMode === "crop") { + const scaledWidth = Math.round((img.width * minHeight) / img.height); + const resized = await sharp(img.buffer) + .resize(scaledWidth, minHeight, { fit: "cover" }) + .toBuffer(); + return { buffer: resized, width: scaledWidth, height: minHeight }; + } + + return img; + }), + ); +} + +async function prepareForVertical( + images: PreparedImage[], + resizeMode: string, +): Promise { + if (resizeMode === "original") return images; + + const minWidth = Math.min(...images.map((m) => m.width)); + + return Promise.all( + images.map(async (img) => { + if (img.width === minWidth && resizeMode === "fit") return img; + + if (resizeMode === "fit") { + const scaledHeight = Math.round((img.height * minWidth) / img.width); + const resized = await sharp(img.buffer).resize(minWidth, scaledHeight).toBuffer(); + return { buffer: resized, width: minWidth, height: scaledHeight }; + } + + if (resizeMode === "stretch") { + const resized = await sharp(img.buffer) + .resize(minWidth, img.height, { fit: "fill" }) + .toBuffer(); + return { buffer: resized, width: minWidth, height: img.height }; + } + + if (resizeMode === "crop") { + const scaledHeight = Math.round((img.height * minWidth) / img.width); + const resized = await sharp(img.buffer) + .resize(minWidth, scaledHeight, { fit: "cover" }) + .toBuffer(); + return { buffer: resized, width: minWidth, height: scaledHeight }; + } + + return img; + }), + ); +} + +async function prepareForGrid( + images: PreparedImage[], + settings: { gridColumns: number; resizeMode: string }, +): Promise { + if (settings.resizeMode === "original") return images; + + const medianWidth = median(images.map((m) => m.width)); + const medianHeight = median(images.map((m) => m.height)); + + return Promise.all( + images.map(async (img) => { + if (settings.resizeMode === "fit") { + const scale = Math.min(medianWidth / img.width, medianHeight / img.height); + if (scale >= 1) return img; + const newW = Math.round(img.width * scale); + const newH = Math.round(img.height * scale); + const resized = await sharp(img.buffer).resize(newW, newH).toBuffer(); + return { buffer: resized, width: newW, height: newH }; + } + + if (settings.resizeMode === "stretch") { + const resized = await sharp(img.buffer) + .resize(medianWidth, medianHeight, { fit: "fill" }) + .toBuffer(); + return { buffer: resized, width: medianWidth, height: medianHeight }; + } + + if (settings.resizeMode === "crop") { + const resized = await sharp(img.buffer) + .resize(medianWidth, medianHeight, { fit: "cover" }) + .toBuffer(); + return { buffer: resized, width: medianWidth, height: medianHeight }; + } + + return img; + }), + ); +} + +function median(values: number[]): number { + const sorted = [...values].sort((a, b) => a - b); + const mid = Math.floor(sorted.length / 2); + return sorted.length % 2 === 0 ? Math.round((sorted[mid - 1] + sorted[mid]) / 2) : sorted[mid]; +} diff --git a/tests/integration/api.test.ts b/tests/integration/api.test.ts index c3054071..a5d2353b 100644 --- a/tests/integration/api.test.ts +++ b/tests/integration/api.test.ts @@ -1754,6 +1754,131 @@ describe("POST /api/v1/tools/stitch", () => { expect(res.statusCode).toBe(200); }); + + it("stitches in grid mode with 2 columns", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.jpg", contentType: "image/jpeg", content: JPG_100x100 }, + { name: "file", filename: "c.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "d.jpg", contentType: "image/jpeg", content: JPG_100x100 }, + { name: "settings", content: JSON.stringify({ direction: "grid", gridColumns: 2 }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + const body = JSON.parse(res.body); + expect(body.jobId).toBeDefined(); + expect(body.downloadUrl).toMatch(/\/api\/v1\/download\//); + }); + + it("applies alignment setting", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.jpg", contentType: "image/jpeg", content: JPG_100x100 }, + { name: "settings", content: JSON.stringify({ alignment: "start" }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + }); + + it("applies border and cornerRadius", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.png", contentType: "image/png", content: PNG_200x150 }, + { name: "settings", content: JSON.stringify({ border: 20, cornerRadius: 10 }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + }); + + it("respects quality setting for jpeg", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.png", contentType: "image/png", content: PNG_200x150 }, + { name: "settings", content: JSON.stringify({ format: "jpeg", quality: 50 }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + }); + + it("handles resizeMode stretch", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.jpg", contentType: "image/jpeg", content: JPG_100x100 }, + { name: "settings", content: JSON.stringify({ resizeMode: "stretch" }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + }); + + it("handles resizeMode crop", async () => { + const { body: payload, contentType } = createMultipartPayload([ + { name: "file", filename: "a.png", contentType: "image/png", content: PNG_200x150 }, + { name: "file", filename: "b.jpg", contentType: "image/jpeg", content: JPG_100x100 }, + { name: "settings", content: JSON.stringify({ resizeMode: "crop" }) }, + ]); + + const res = await app.inject({ + method: "POST", + url: "/api/v1/tools/stitch", + headers: { + authorization: `Bearer ${adminToken}`, + "content-type": contentType, + }, + body: payload, + }); + + expect(res.statusCode).toBe(200); + }); }); // ═══════════════════════════════════════════════════════════════════════════