• Check out the results of the Techtree Contest #19!
  • Listen to a special audio message from Bill Roper to the Hive Workshop community (Bill is a former Vice President of Blizzard Entertainment, Producer, Designer, Musician, Voice Actor) 🔗Click here to hear his message!
  • Read Evilhog's interview with Gregory Alper, the original composer of the music for WarCraft: Orcs & Humans 🔗Click here to read the full interview.
  • Create a void inspired texture for Warcraft 3 and enter Hive's 34th Texturing Contest: Void! Click here to enter!
  • The Hive's 22nd Icon Contest: Creep Abilities is now concluded, time to vote for your favourite set of icons! Click here to vote!

TailCutter

This bundle is marked as pending. It has not been reviewed by a staff member yet.
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:

  1. Image Upload: Supports drag-and-drop, file selection, or pasting from clipboard (Ctrl+V).
  2. Image Adjustment: Adjust brightness, contrast, saturation, and hue directly within the interface.
  3. 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.
  4. Export: Automatically slices the image according to the defined grid and saves all fragments as a ZIP archive.
  5. Grid Templates: Save and load custom line configurations.
  6. Responsive Design: Fully functional on both desktop and mobile devices with an optimized interface.
  7. 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.

image.png


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
Contents

TailCutter_v6 (Binary)

good tool :infl_thumbs_up:
this for to export in 64x64 .blp format, that way, if only need to transfer a whole image to use as an icon set Horizontal/Vertical Lines to 1; otherwise also converts all slices
replace this part
HTML:
tempCanvas.width = w;
tempCanvas.height = h;
tCtx.clearRect(0, 0, w, h);
tCtx.drawImage(state.adjustedImage, x1, y1, w, h, 0, 0, w, h);

// Конвертируем canvas в blob
const blob = await new Promise(resolve => {
    tempCanvas.toBlob(resolve, 'image/png');
});

if (blob) {
    folder.file(`slice_${r}_${c}_${w}x${h}.png`, blob);
    count++;
}
HTML:
tempCanvas.width = 64;
tempCanvas.height = 64;
tCtx.clearRect(0, 0, w, h);
tCtx.drawImage(state.adjustedImage, x1, y1, w, h, 0, 0, 64, 64);

// Конвертируем canvas в blob
let blob = await new Promise(resolve => {
    tempCanvas.toBlob(resolve, 'image/png');
});
blob = toblp(blob)
if (blob) {
    folder.file(`slice_${r}_${c}_${w}x${h}.blp`, blob);
    count++;
}

and add in the head
HTML:
<script type="module">
    import {
        BLPColorEncoding,
        BLPPixelFormat,
        decodePNGData,
        encodeToBLP,
        ResizeMode
    } from "https://esm.sh/jsr/@pinta365/blp";
    async function toblp(blob) {
        try {
            const arrayBuffer = await blob.arrayBuffer();
            const pngData = new Uint8Array(arrayBuffer);
            const decodedImage = await decodePNGData(pngData);
            const blpData = encodeToBLP(decodedImage, {
                compression: BLPColorEncoding.DXT,
                alphaSize: 8,
                preferredFormat: BLPPixelFormat.DXT5,
                generateMipmaps: true,
                resizeMode: ResizeMode.PAD_CENTER,
                autoResize: true,
            });
            return new Blob([blpData], { type: "application/octet-stream" });
        } catch (err) {
            console.error(err);
        }
    }
    window.toblp = toblp;
</script>
 
good tool :infl_thumbs_up:
this for to export in 64x64 .blp format, that way, if only need to transfer a whole image to use as an icon set Horizontal/Vertical Lines to 1; otherwise also converts all slices
it's cool, but there's already a reforgerator and blplab for blp format)
I have created tailcutter just for slicing images if I am working with images generated by AI.
It's just really annoying to cut them manually in Photoshop.
But even so, I'm glad that someone liked the software and found it useful. :peasant-grin:
 
it's cool, but there's already a reforgerator and blplab for blp format)
I have created tailcutter just for slicing images if I am working with images generated by AI.
It's just really annoying to cut them manually in Photoshop.
But even so, I'm glad that someone liked the software and found it useful. :peasant-grin:
dont forget https://www.hiveworkshop.com/icon-borderiser although it requires a registred account. There will always be multiple options, but this one combines everything into one, and if it's going to be used for developing icons, it's best to use the 64x64 blp format. Otherwise, we'd have to use a different tool for each step. It's not a pull request, but a personal fork for those who want those features, since it's labeled as open source it is common to contribute modifications for different applications. I think your tool has potential :infl_thumbs_up:
 
Last edited:
Back
Top