Інтерактивна веб-студія для виділення об'єктів на будь-яких фотографіях та їхньої трансформації у монохромні презентаційні асети в стилі Halftone / Newsprint / Engraving з автентичним рваним контуром паперової наклейки (Torn Paper Edge) та об'ємною 3D тінню на прозорому фоні.
- Точне півтонове растрування: регулярна крапкова сітка (Halftone Dot Matrix) під кутом 45° з динамічним радіусом крапок від яскравості.
- Повнодіапазонні тональні режими:
- Контрастне ч/б (Grayscale Contrast) — плавні півтони з високою деталізацією.
- Газетний растр (Dots) — класичний газетний друк.
- Фото + Растр (Hybrid) — текстура поверх фотографії.
- Гравюра (Engraving) — ретро-лінійна гравюра.
- Тонке регулювання: повзунки контрастності, інверсії кольорів (негатив для темних слайдів) та масштабу крапок.
- Точний алгоритм 8SED: швидкий розрахунок евклідової відстані від контуру виділеного об'єкта.
- Фрактальний шум (fBM / Simplex Noise): моделювання природного рваного паперу та волокон по периметру.
- Пом'ята текстура паперу (Crumpled Paper): реалістичні діагональні заломи з рельєфним світлотіньовим моделюванням.
- Палітра підкладки: чистий білий, вінтажний кремовий (#f6f0db), світло-бежевий пергамент, нейтральний сірий та темний графіт.
- М'яка об'ємна 3D тінь: налаштування глибини, зміщення та розмиття для об'ємного ефекту стікера.
- Розумне ласо (W): інтерактивне виділення контуру з бар'єром першого зіткнення (First-Hit Edge Barrier) та захистом одягу/деталей (Depth Fence 28px).
- Пензель маски (B) та Ластик (E): миттєве малювання зі синхронним 60 FPS попереднім переглядом без затримок та помаранчевим курсором точного радіуса.
- Виділення прямокутником (M) та Довільне ласо (L): автоматична ізоляція виділеного об'єкта зі стиранням зайвого фону (Shift для додавання, Alt для віднімання).
- Швидкі операції: Виділити все, Інвертувати маску, Очистити все.
- Копіювання PNG (Ctrl + C): миттєве копіювання прозорого вирізаного PNG-асету в буфер обміну для вставки в PowerPoint, Keynote, Figma, Canva або месенджери.
- Експорт в 1 клік: автоматичне кадрування навколо наклейки зі збереженням зображення, обводки та тіні без фону.
- Вставка з буфера (Ctrl + V) та Drag & Drop файлів.
| Клавіша | Дія |
|---|---|
| Ctrl + V | Вставити фото з буфера обміну |
| Ctrl + C | Скопіювати прозорий PNG асет у буфер обміну |
| Ctrl + Z / Ctrl + Y | Скасувати / Повторити дію з маскою |
| Ctrl + Shift + Z | Повторити дію з маскою |
| Space + Drag / H | Панорамування робочої області (Pan) |
| Колесо миші | Плавний центрований зум сцени |
| [ / ] | Зменшити / Збільшити радіус пензля |
| W | Розумне ласо (Smart Magic Wand) |
| B / E | Пензель (Brush) / Ластик (Eraser) |
| M / L | Прямокутне виділення / Довільне ласо |
`�ash
git clone https://github.com/SeriySpray/ImageToAsset.git cd ImageToAsset
npm install
npm run dev `
Додаток відкриється за адресою: http://localhost:3000
- Frontend: React 19, TypeScript, Vite
- UI & Стилізація: Tailwind CSS v4, Lucide Icons, шрифтова гарнітура JetBrains Mono
- Графічний рушій: HTML5 Canvas 2D API, Euclidean Distance Transform (8SED), Simplex Noise & fBM
- Архітектура: 32-бітний растровий скрин, O(1) таблиці підстановки (LUT), субтрактивна ізоляція та апаратний композитинг