Image Merger

When not to use this browser tool

Browser-side image processing is great until you hit a Canvas memory limit. This tool uses ctx.drawImage plus canvas.toBlob, and those have hard ceilings that vary by browser and device. If you hand it five 24-megapixel phone photos and ask for a horizontal merge, you're asking the browser to allocate a canvas around 25,000 × 4,000 pixels — 100 megapixels, 400 MB at 4-bytes-per-pixel RGBA. Safari on iOS caps total canvas area at 16,777,216 pixels (roughly 4096×4096); see jhildenbiddle/canvas-size for the current matrix. Past that limit the canvas renders blank or the tab crashes with no error message.

Reach for something else when:

• Your sources are over ~20 MP each and you want to merge several of them. Use ImageMagick (magick montage or convert +append) — it streams tiles rather than holding the full merged image in RAM, so a 500-megapixel panorama composites fine on a laptop.
• You need EXIF, ICC profiles, or layers preserved. Canvas strips all of it. Use GIMP, Photoshop, or exiftool — or at minimum keep your originals so you can re-export later.
• You're batch-processing tens of images. A browser tab is single-threaded through the main thread's drawImage pipeline. A Node script with sharp (libvips under the hood) processes thousands of images per minute in parallel and produces identical or better output. Sharp's composite() handles what this tool's merge mode does, at scale.

The sweet spot for this tool is what browsers do well: a handful of screenshots, phone photos under ~12 MP, social-media-sized comparisons. For anything approaching the memory ceiling, down-res your sources first (to roughly 2000 px on the long edge) before merging, or switch to a native tool.