Image merger
Merge multiple images horizontally, vertically or in a grid with custom gap, padding, alignment and uniform scaling, on a transparent or solid background, and export PNG, JPEG or WebP.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Images are merged locally in your browser and never uploaded
Pick at least one image — you can select several at once
Layout
Merged result
What this tool does
- Combine several screenshots into one comparison image: side by side or stacked, with start, center or end alignment so mismatched sizes still line up.
- Build a preview grid or product wall: grid mode lays images out by column count, taking the widest image per column, and reserves full columns even on an incomplete last row.
- Create a long scroll image: apply "same height" first so every image shares one height, then merge them vertically for a tidy strip.
- Add a white border or transparent padding: adjustable padding with a transparent, white, black or custom background, exported as PNG to keep alpha.
Example
Input
Two images, 800 × 600 and 400 × 200, merged horizontally with gap 0, padding 0 and center alignment
Output
Canvas 1200 × 600 Image 1 at (0, 0), size 800 × 600 Image 2 at (800, 200), size 400 × 200 Export filename merged-2x1.png
Canvas size and placements come from the pure geometry layer: horizontally width = Σwidth + gap×2 + padding×2 and height = max(height) + padding×2, while centering offsets the 200px-tall image by (600−200)/2 = 200 inside the 600px canvas. Painting to a canvas and exporting needs the browser and cannot be verified offline.
Frequently asked questions
Can I change the merge order?
Yes. Every uploaded image has move up, move down and remove buttons, and that list order is the merge order; in grid mode it determines the left-to-right, top-to-bottom placement. Without any adjustment the order follows the order in which you selected the files.
What is the difference between "limit longest edge" and "same height"?
"Limit longest edge" only shrinks: an image whose longest edge exceeds the value is scaled down proportionally, and smaller images stay untouched. "Same height" scales everything to one identical height, so small images are enlarged (and may look soft) — that is what you want for an even strip.
Why is the alignment option ignored in grid mode?
Grid mode deliberately ignores alignment and pins each image to the top-left of its cell, because centering inside cells makes rows and columns look ragged. Use horizontal or vertical mode when you need center or bottom alignment.
What limits apply to gap, padding and columns?
Gap and padding both run from 0 to 100 pixels, columns from 1 to 8, and the canvas longest edge is capped at 20000 pixels (the practical browser canvas limit — most devices fail to allocate beyond it). Horizontal and vertical merges have no hard image count limit, but watch the total canvas size.
Are my images uploaded?
No. Every image is decoded in the browser with createImageBitmap, drawn onto a local canvas at the computed coordinates and exported through toBlob. No network request is made at any point.
Keywords：图片拼接拼图合并图片长图拼接image mergerimage mergecombine imagesstitch imagesphoto gridcollage