Collage Maker
Combine multiple photos into a beautiful collage layout.
Collage Maker combines multiple photos into one framed sheet — as the card puts it, "Combine multiple photos into a beautiful collage layout." Drop two or more images (the counter reads "{n} image{s} selected"), pick a Layout from 2×2 Grid, 3×3 Grid, Horizontal Strip, Vertical Strip, and Mosaic, then dial in "Background Color", "Gap" (0–50), and "Padding" (0–50). "Create Collage" (or "Creating..." while it runs) composites everything on a local canvas and hands back "Dimensions" and "File Size" plus Download / Start Over.
Each image is center-fitted into its cell with uniform scaling, so mixed-resolution inputs letterbox gracefully against the gap-and-padding grid. The whole flow — thumbnails, removal via each thumb's ×, layout math, JPEG export — is local Canvas work; nothing is uploaded.
How it works
lib/imageCollage.ts builds the layout grid through getLayoutGrid: grid-2x2 and grid-3x3 are fixed matrices, horizontal packs every image as columns in one row, vertical stacks a single column, and mosaic adapts from 2×1 up to 3×3 based on image count. Cell size is the average natural width/height across inputs; the canvas is padding*2 + cols*cellW + gaps, and each image is drawn with Math.min(cellW/w, cellH/h) center-fit scaling.
A Zod collageSchema validates gap/padding as integers 0–50 (defaults 8/16) and the layout (default grid-2x2). MIN_IMAGES is 2 for every layout except mosaic, which needs 3 — the submit button disables below that and the hint under it repeats the minimum. Export is canvas.toBlob('image/jpeg', 0.92) as collage.jpg. No third-party libs; fully local.
How to use
- Drop multiple images (or click "Click or drag images to create a collage"); non-image types are filtered client-side.
- Review thumbnails; hover a thumb's × to remove one image, or click "Clear All" to reset.
- Select "Layout": 2×2 Grid, 3×3 Grid, Horizontal Strip, Vertical Strip, or Mosaic.
- Set "Background Color" via the color input, then "Gap" (0–50) and "Padding" (0–50) sliders.
- Ensure the image count meets the minimum (mosaic needs 3; all others 2) — otherwise "Create Collage" stays disabled and shows the "Need at least {minImages} images for this layout" hint.
- Click "Create Collage" and wait for the "Collage created!" toast (button reads "Creating...").
- Read "Dimensions" and "File Size", then "Download" (collage.jpg) or "Start Over".
Tips
- Mosaic is the only layout requiring 3 images — switch layout if you're one photo short.
- Cell size is the average input size, so mixed-resolution photos letterbox via the center-fit scale.
- Output is always JPEG 0.92 (collage.jpg) regardless of Background Color transparency needs — use a solid color.
- Gap 0 with small padding produces a seamless grid strip; raise Gap to separate tiles visually.
Collage Maker FAQ
What output format do I get?
JPEG at quality 0.92, always named collage.jpg.
Why is Create Collage disabled?
Fewer images than the minimum for the chosen layout (mosaic needs 3; grid/horizontal/vertical accept 2) — the hint under the button repeats the minimum.
Are my images uploaded?
No — collage compositing runs on a local canvas; nothing leaves the browser.
Does layout affect the minimum image count?
Yes — only Mosaic raises the minimum to 3; the other layouts accept 2 images.
Can I remove one image without clearing everything?
Yes — hover a thumbnail and click its × to remove just that file; "Clear All" resets everything.
Credits
- Canvas 2D API — Layout compositing and JPEG export