Разделить изображение на сетку, плитки и кадры спрайта

01

Как разделить изображение на точные плитки

разделить изображение — Проверить каждый разрез до экспорта

Выберите строки и столбцы, если важна итоговая сетка. Чтобы разделить изображение, инструмент равномерно распределяет рабочую область и однозначно назначает оставшиеся пиксели. Шаблоны создают половины, четверти и сетку 3 на 3, а вручную можно задать до 20 на 20.

Выберите точный размер, если приложение, печать или спрайт-лист уже задаёт размеры кадра. Инструмент начинает после поля, двигается на размер плюс интервал и сохраняет меньшую крайнюю плитку при наличии остатка.

Нумерованный просмотр связывает каждый прямоугольник с именем. Обычный порядок начинается слева сверху, обратный назначает 01 правому нижнему углу. Скачайте одну плитку или весь ZIP после проверки.

• разделить изображение — 2 на 1 создаёт левую и правую половины.
• разделить изображение — 1 на 2 создаёт верхнюю и нижнюю половины.
• разделить изображение — 3 на 3 создаёт девять панелей.
• разделить изображение — Точный размер подходит для спрайтов.

02

разделить изображение — Выбрать сетку или точный размер

разделить изображение — Каждый разрез соответствует исходным пикселям

Чтобы разделить изображение, расчёт использует внутренние размеры после декодирования. Сетка вычитает поля и интервалы и распределяет остаток. Точный режим движется по выбранным размерам и сохраняет край. Просмотр и экспорт используют один план.

03

разделить изображение — Сохранить изображение приватным

разделить изображение — Локальные API исключают обработку на сервере

Инструмент принимает локальный File, декодирует через createImageBitmap() и копирует прямоугольники методом drawImage() во временный Canvas. Запроса загрузки и удалённого проекта нет. Очистка закрывает bitmap и отзывает локальный URL.

04

разделить изображение — Экспортировать плитку или ZIP

разделить изображение — Формат, качество и имена понятны

Можно разделить изображение и сохранить PNG, JPEG или WebP. PNG подходит тексту и прозрачности, JPEG фотографиям, WebP совместимым системам. Одна плитка кодирует один прямоугольник, ZIP — весь план с нумерацией.

05

разделить изображение — Как проверяется инструмент

разделить изображение — Официальные источники и воспроизводимые тесты

Проверка загружает цветные изображения известных размеров, тестирует сетку, точный размер, поля и интервалы, сравнивает координаты, повторно открывает размеры и проверяет ZIP. Исходный код дополнительно проверяется на сетевые примитивы.

06

разделить изображение — Как использовать создатель спрайт-листов без сложной программы

разделить изображение — Задайте порядок, ячейку, скорость и экспортируйте координаты

разделить изображение — Добавляйте кадры в порядке воспроизведения. Перемещение и удаление меняют предпросмотр и индекс метаданных. Полоса удобна для короткого цикла, сетка не позволяет текстуре стать слишком широкой.

разделить изображение — Ширина и высота задают ячейку. Вместить сохраняет весь кадр, Заполнить обрезает края, Растянуть задаёт точный размер. Интервал разделяет ячейки, внешнее поле окружает атлас; оба учитываются в x и y.

разделить изображение — Сначала создайте атлас, затем копируйте данные. Если размер выше безопасного, изображение и координаты масштабируются вместе. Поэтому CSS или JSON точно описывает сохранённый файл.

07

разделить изображение — Осознанно выберите размеры атласа

разделить изображение — Ячейки, интервалы и поля задают координаты

разделить изображение — Создатель спрайт-листов показывает геометрию до экспорта. Число столбцов задаёт переносы строк, а полосы фиксируют одну строку или столбец. Начало каждой ячейки учитывает внешнее поле и шаг из размера кадра с интервалом. Если Canvas нужно уменьшить, изображение и координаты получают одинаковый итоговый масштаб.

08

разделить изображение — Оставьте игровую графику в браузере

разделить изображение — Локальные API исключают загрузку для обработки

разделить изображение — Выбранные файлы декодируются через createImageBitmap() и рисуются на локальном Canvas. Миниатюры используют blob-адреса браузера. Инструменту не нужны endpoint загрузки, аккаунт или облачный проект. Очистка закрывает bitmaps и отзывает адреса предпросмотра, не меняя исходные файлы на устройстве.

09

разделить изображение — Экспортируйте данные для CSS или движка

разделить изображение — Все форматы описывают один атлас

разделить изображение — Массив JSON сохраняет порядок, объект JSON позволяет искать по имени, а CSS создаёт общее фоновое правило и класс для каждого кадра с отрицательным background-position. PNG сохраняет альфа-канал; WebP предлагает настройку качества. Все размеры описывают именно экспортированный атлас.

10

разделить изображение — Как проверяется результат

разделить изображение — Официальные спецификации дают воспроизводимые проверки

разделить изображение — Проверка объединяет официальную документацию и воспроизводимые тесты. MDN описывает drawImage() и toBlob(), W3C определяет background-position. Тесты загружают цвета разных размеров и прозрачности, меняют порядок, проверяют прямоугольники, экспортируют WebP, повторно читают 148 на 414 пикселей и отделяют в журнале сети статические ресурсы от локальных blob-запросов.

11

разделить изображение — Практический процесс объединения изображений

разделить изображение — От отдельных файлов к предсказуемому холсту

разделить изображение — Начните с последовательности. Очередь задаёт итоговый порядок и позволяет перемещать или удалять рабочую копию без изменения оригинала. Горизонтальный макет сравнивает, вертикальный показывает шаги, сетка организует набор, а умная склейка соединяет последовательные скриншоты.

разделить изображение — Естественный размер сохраняет пиксели, одинаковая ширина или высота выравнивает композицию. Интервал, выравнивание и фон задаются до экспорта, а предпросмотр показывает неверный порядок или пробелы.

разделить изображение — Главное действие находится в верхней части страницы. Файлы можно выбрать или перетащить, затем изменить порядок. Объединение остаётся обратимым до скачивания.

12

разделить изображение — Почему важна локальная обработка

разделить изображение — Конфиденциальность — часть архитектуры

разделить изображение — Браузер читает только выбранные файлы, декодирует их и создаёт результат на локальном холсте. Не нужны аккаунт, сервер обработки или платный API; 0 исходных изображений не отправляются MergeImage в основном процессе.

разделить изображение — Локальная обработка подходит для черновиков, личных фотографий, счетов и внутренних скриншотов, которые не следует передавать без необходимости.

разделить изображение — Рабочее пространство принимает 30 изображений и до 20 МБ на файл. Результат выше 12 000 пикселей по стороне или 80 мегапикселей пропорционально уменьшается. Это границы продукта, а не универсальные пределы браузеров.

13

разделить изображение — Контроль качества без скрытой обработки

разделить изображение — Выбор формата по содержанию

разделить изображение — PNG подходит для текста, скриншотов и прозрачности. JPEG часто уменьшает фотографии, но теряет детали и не сохраняет прозрачность. WebP — компромисс для поддерживающих его целей.