PROGRAMMS
TailCutter (V5) — Инструмент для нарезки изображений
Это полнофункциональное веб-приложение для точного разрезания (слайсинга) изображений на фрагменты с помощью настраиваемой сетки. Пользователь может загрузить изображение, настроить сетку деления, вручную перемещать линии и экспортировать все получившиеся фрагменты одним ZIP-архивом.
Ключевые функции:
Загрузка изображений: Поддержка drag-and-drop, выбора файла или вставки из буфера обмена (Ctrl+V).
Коррекция изображения: Регулировка яркости, контраста, насыщенности и оттенка прямо в интерфейсе.
Настройка сетки:
Управление количеством горизонтальных и вертикальных линий.
Выбор цвета и толщины линий.
Интерактивное редактирование: Можно кликнуть на любую линию, чтобы выбрать ее, и точно перемещать с помощью мыши, сенсора или клавиш со стрелками.
Экспорт: Автоматическая нарезка изображения по заданной сетке и сохранение всех фрагментов в виде ZIP-архива.
Шаблоны сеток: Сохранение и загрузка пользовательских конфигураций линий.
Адаптивный дизайн: Полноценная работа как на десктопе, так и на мобильных устройствах с оптимизированным интерфейсом.
Кастомизация: Несколько цветовых тем (темная, светлая, "полночь", "лес" и др.) и поддержка русского/английского языков.
Для кого: Для дизайнеров, разработчиков, контент-менеджеров или любого пользователя, которому нужно быстро и точно разрезать макет, изображение интерфейса или любую другую графику на отдельные части.
Создано при помощи нейросетей: Gemini 3 Pro, Minimax Air M2, Deepseek & GPT-5.1.
Основное предназначение, при генерации изображений при помощи нейросетей, упрощает процесс нарезки изображений
Прокрутить к ресурсу
Метрика V5 V6
Строк кода 2507 1785 (−29%)
HTML дублирование desktop/mobile ❌ Двойное ✅ Один sidebar
Архитектура JS Глобальные функции ✅ IIFE модуль TC
🔧 Исправленные проблемы
# Проблема Решение
1 Дублирование Desktop/Mobile HTML Один <aside> sidebar — на десктопе статичный, на мобильном выезжает как drawer
2 Утечка памяти (Image) Убрал промежуточный new Image() — фильтры рисуются через processCanvas напрямую, draw() берёт с него данные
3 ~200 утилитарных CSS-классов Заменены на семантический CSS (~300 строк вместо ~600)
4 Нет debounce на слайдерах Добавлен debounce(40ms) на applyAdjustments
5 Pinch-to-zoom не работал Реализовано отслеживание 2-х touch-точек
6 Мигающий drag overlay Исправлен через счётчик dragCounter
7 Нет Undo/Redo Ctrl+Z с стеком до 40 состояний
8 Лишний toDataURL→decode цикл draw() рисует напрямую из processCanvas
🆕 Новые фичи
# Фича Как работает
1 Undo (Ctrl+Z) Стек состояний сетки, до 40 шагов назад
2 Удаление линии (Delete) Выбрал линию → Delete/Backspace — линия удалена
3 Дублирование линии Кнопка «Duplicate (+8px)» — создаёт копию на +8px
4 Выравнивание ячеек Кнопка «Equalize All Cells» — сбрасывает в равные доли
5 Привязка (Snapping) Выбор шага: Off / 8 / 16 / 32 / 64 / 128px — линии «прилипают»
6 Подписи ячеек (R0C0, R1C2…) Рисуются на канвасе, можно отключить чекбоксом
7 Превью нарезки Мини-таблица будущих кусков прямо на рабочей области
8 Выбор формата экспорта PNG / JPEG / WebP с настройкой качества
9 CSS спрайт-таблица Генерирует sprite.css с background-position для каждого куска
10 Pinch-to-zoom Масштабирование двумя пальцами на мобильных
11 Ctrl+Scroll zoom Зум колёсиком мыши с зажатым Ctrl
12 Toast-уведомления Красивые анимированные уведомления вместо alert()
13 Горячие клавиши Ctrl+Z undo, Delete удалить линию, +/- добавить/убрать столбцы, стрелки ±1/10px
14 Мобильный drawer-sidebar Вместо дублированных панелей — единый sidebar с overlay
15 Лимит файла увеличен 10MB → 50MB