From 32c0a544a09010c6083f5298e93ae7dd7d6dc492 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 5 Feb 2026 19:46:14 +0000 Subject: [PATCH 1/2] Add image stitcher tool for horizontal image alignment Single-page tool that lets users load multiple images and stitch them horizontally with adjustable vertical alignment. Features include: - Auto-align using edge luminance cross-correlation - Drag to adjust vertical offset (pointer events for desktop + mobile) - Pixel-precise nudge buttons (1px and 10px) and arrow key support - Zoomed overlap preview showing seam areas between adjacent images - Image reordering with left/right buttons - Live stitched result preview at full resolution - Export as PNG or JPEG with adjustable quality https://claude.ai/code/session_01Cf9UUauF9ZfjvFwnZMLs4F --- image-stitcher.html | 711 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 711 insertions(+) create mode 100644 image-stitcher.html diff --git a/image-stitcher.html b/image-stitcher.html new file mode 100644 index 0000000..dcb3413 --- /dev/null +++ b/image-stitcher.html @@ -0,0 +1,711 @@ + + + + + +Image Stitcher + + + + +

Image Stitcher

+

Horizontally stitch multiple images with adjustable vertical alignment

+ + + +
+
+ + + + + +
+ +
+ Selected: None + + + + +
+ +
+ +
+

Overlap Previews (seam areas between adjacent images)

+
+
+ +
+

Stitched Result

+
+ +
+
+
+ + + + 92% +
+
+
+ + + + From 908ae3d9bbdc68d62765235dacb3a4d50e1c379e Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 5 Feb 2026 19:52:12 +0000 Subject: [PATCH 2/2] Add horizontal/vertical orientation toggle and fix drop zone border glitch - Add Horizontal/Vertical toggle buttons in the toolbar to switch stitching orientation - In vertical mode: images stack top-to-bottom, cross-axis adjustment is left/right, auto-align uses bottom/top edge correlation - Nudge button labels and keyboard shortcuts adapt to current mode - Fix visual glitch where drop zone dashed border leaked outside its bounds by adding position:relative and overflow:hidden to contain the absolutely-positioned hidden file input https://claude.ai/code/session_01Cf9UUauF9ZfjvFwnZMLs4F --- image-stitcher.html | 494 ++++++++++++++++++++++++++++++-------------- 1 file changed, 335 insertions(+), 159 deletions(-) diff --git a/image-stitcher.html b/image-stitcher.html index dcb3413..631f9e4 100644 --- a/image-stitcher.html +++ b/image-stitcher.html @@ -19,6 +19,9 @@ /* Drop zone */ #drop-zone { + display: flex; + justify-content: center; + align-items: center; border: 2px dashed #bbb; border-radius: 12px; padding: 40px 20px; @@ -27,6 +30,8 @@ background: #fff; transition: background 0.2s, border-color 0.2s; margin-bottom: 20px; + position: relative; + overflow: hidden; } #drop-zone.dragover { background: #e8f0fe; border-color: #4285f4; } #drop-zone p { font-size: 16px; color: #666; } @@ -51,8 +56,14 @@ background: #4285f4; color: #fff; border-color: #4285f4; } .toolbar button.primary:hover { background: #3367d6; } +.toolbar button.active { + background: #e8f0fe; border-color: #4285f4; color: #4285f4; +} .toolbar button.danger { color: #d93025; border-color: #d93025; } .toolbar button.danger:hover { background: #fce8e6; } +.toolbar .sep { + width: 1px; height: 24px; background: #ddd; margin: 0 4px; +} /* Image strips area */ #editor { display: none; } @@ -61,14 +72,18 @@ display: flex; align-items: flex-start; gap: 0; - overflow-x: auto; - padding: 20px 0; + overflow: auto; + padding: 20px; background: repeating-conic-gradient(#e0e0e0 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid #ddd; border-radius: 8px; min-height: 200px; position: relative; } +#strips-container.vertical { + flex-direction: column; + align-items: flex-start; +} .strip-wrapper { position: relative; @@ -82,7 +97,6 @@ .strip-wrapper.dragging { cursor: grabbing; opacity: 0.9; } .strip-wrapper img { display: block; - max-height: 500px; pointer-events: none; } .strip-label { @@ -136,8 +150,9 @@ border-radius: 4px; background: repeating-conic-gradient(#e0e0e0 0% 25%, #fff 0% 50%) 50% / 10px 10px; max-height: 500px; + max-width: 100%; } -.overlap-canvas-wrap canvas { display: block; } +.overlap-canvas-wrap canvas { display: block; max-width: 100%; height: auto; } /* Result */ #result-section { @@ -150,11 +165,12 @@ } #result-section h3 { margin-bottom: 12px; } #result-container { - overflow-x: auto; + overflow: auto; background: repeating-conic-gradient(#e0e0e0 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid #ddd; border-radius: 4px; padding: 8px; + max-height: 80vh; } #result-canvas { max-width: 100%; height: auto; } #result-info { font-size: 13px; color: #666; margin-top: 8px; } @@ -184,7 +200,7 @@

Image Stitcher

-

Horizontally stitch multiple images with adjustable vertical alignment

+

Stitch multiple images with adjustable alignment