Image Splice

Simple browser-based Image manipulation (Slice and combining) with clean and modern dark theme UI.

Quickstart

1. Open index.html (or npx serve if you want)
2. Use the header switch to pick SLICER or COMBINER

Requires a modern browser (uses canvas, CSS aspect-ratio, nested CSS features). Internet access needed on first load for the JSZip CDN.

Features

Slicer

• Drop or browse for any image
• Two slicing modes:
  • Grid — split into rows × columns (e.g. 2×2, 3×4)
  • Carousel — split into N vertical strips
• Live overlay preview with grid lines and numbered cells
• Download individual slices or all of them as a ZIP

Combiner

• Combine images by attaching them to any side (top / bottom / left / right) of an existing image, building a tree layout
• Click a + drop zone or drag & drop an image onto it
• Remove attached images individually
• Options:
  • Background color — preset palette + custom picker, plus full transparency (exported PNG keeps its alpha channel)
  • Scaling — fit child images to the base image's dimensions
  • Show Borders — red outlines + hatched background to reveal seams
  • Show Sizes — overlay each image's pixel dimensions
  • No Overlap — automatically push overlapping images apart
  • Auto Crop — trim empty background margins (with configurable tolerance)
• Download the combined result as a PNG

Project Structure

image-slicer/
├── index.html      # Markup for both panels
├── css/
│   └── style.css   # Theme, switch, controls, layout
└── js/
    └── app.js      # State, slicer logic, combiner tree layout, downloads

Acknowledgement

The tab toggle in the header is a 3D "chip switch" (inspired by this Dribbble shot):

Disclosure on LLM use

The project were mostly written by Qwen3.8 with manual validataion and bugfixes.