TailCutter (V6) — Image Slicing Tool
This is a full-featured web application for precisely slicing images into fragments using a customizable grid. The user can upload an image, configure a slicing grid, manually adjust grid lines, and export all resulting slices as a single ZIP archive.
Key Features:
- Image Upload: Supports drag-and-drop, file selection, or pasting from clipboard (Ctrl+V).
- Image Adjustment: Adjust brightness, contrast, saturation, and hue directly within the interface.
- Grid Configuration:
- Control the number of horizontal and vertical lines.
- Choose line color and thickness.
- Interactive Editing: Click on any line to select it and move it precisely using the mouse, touch, or arrow keys.
- Export: Automatically slices the image according to the defined grid and saves all fragments as a ZIP archive.
- Grid Templates: Save and load custom line configurations.
- Responsive Design: Fully functional on both desktop and mobile devices with an optimized interface.
- Customization: Multiple color themes (dark, light, midnight, forest, etc.) and support for Russian/English languages.
Target Audience: For designers, developers, content managers, or any user who needs to quickly and accurately slice a layout, interface mockup, or any other graphic into separate parts.
Created using
Gemini 3 Pro,
Minimax Air M2,
GPT-5.1 and
DeepSeek.
UPG 01.06.26

V5 → V6: Comparison
V5 V6 Metrics
Lines of code 2507 1785 (-29%)
Desktop/Mobile HTML Duplication

Double

Single sidebar
JS Architecture Global functions

IIFE TC module

Fixed Issues
# Issue Solution
1 Desktop/Mobile HTML Duplication Single <aside> sidebar — static on desktop, appears as a drawer on mobile
2 Memory Leak (Image) Removed intermediate new Image() — filters are drawn directly via processCanvas, draw() takes data from it
3 ~200 utility CSS classes Replaced with semantic CSS (~300 lines instead of ~600)
4 No debounce on sliders Added debounce(40ms) to applyAdjustments
5 Pinch-to-zoom didn't work. Implemented tracking of two touch points.
6. Blinking drag overlay. Fixed via dragCounter.
7. No Undo/Redo. Ctrl+Z with a stack of up to 40 states.
8. Extra toDataURL→decode loop. Draws directly from processCanvas.

New Features
# Feature How it works.
1. Undo (Ctrl+Z). Grid state stack, up to 40 steps back.
2. Delete a line. Select a line → Delete/Backspace — the line is deleted.
3. Duplicate a line. The "Duplicate (+8px)" button creates a copy at +8px.
4. Cell alignment. The "Equalize All Cells" button resets the cell size to equal shares.
5. Snapping. Step selection: Off / 8 / 16 / 32 / 64 / 128px — the lines "stick"
6. Captions Cells (R0C0, R1C2, etc.) Drawn on canvas, can be disabled with a checkbox
7 Slice preview Mini-table of future slices directly on the workspace
8 Selectable export format: PNG / JPEG / WebP with quality settings
9 CSS sprite table Generates sprite.css with background-position for each slice
10 Pinch-to-zoom Zoom with two fingers on mobile devices
11 Ctrl+Scroll zoom Zoom with the mouse wheel while holding down Ctrl
12 Toast notifications Beautiful animated notifications instead of alert()
13 Hotkeys: Ctrl+Z undo, Delete delete line, +/- add/remove columns, arrows ±1/10px
14 Mobile drawer-sidebar Instead of duplicate panels, a single sidebar with overlay
15 File limit increased 10MB → 50MB