Руководство по созданию коллажей

Объединяйте несколько изображений в сетку, свободный коллаж или макет в стиле журнала. Настраивайте отступы, границы, цвет фона и соотношение сторон. Все операции выполняются локально в вашем браузере — без загрузки на сервер.

Что вам понадобится

Браузер — Chrome, Firefox, Safari или Edge с поддержкой OffscreenCanvas Форматы — JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP или TIFF Лимит — 20 МБ на файл (файлы больше 20 МБ будут отклонены) Аккаунт — не требуется Интернет — не нужен после загрузки страницы

Создание коллажа

Откройте Image Collage в браузере. Перетащите несколько файлов изображений из проводника в зону загрузки. Либо нажмите на область загрузки, чтобы выбрать файлы на устройстве.

Каждый файл должен быть не более 20 МБ — файлы, превышающие этот лимит, будут отклонены. Выберите тип макета: сетка, свободный или журнальный. Сетка располагает изображения в равномерные строки и столбцы.

Свободный макет позволяет перетаскивать и размещать каждое изображение в любом месте холста. Журнальный макет применяет редакционный стиль с разным размером и расположением элементов. Установите цвет фона с помощью палитры.

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

Для журнальных макетов настройте соотношение сторон холста. Нажмите кнопку создания. API OffscreenCanvas объединяет все изображения на одном холсте.

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

Нажмите её, чтобы сохранить результат на устройство. Браузер записывает файл напрямую из памяти на диск. После завершения загрузки libvips автоматически очищает временные буферы памяти.

Как это работает

Image Collage использует API OffscreenCanvas для объединения нескольких изображений на одном холсте. Когда вы загружаете изображения, браузер считывает их напрямую в память — загрузка на сервер не происходит.

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

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

Каждое изображение отрисовывается на холсте в рассчитанной позиции с помощью рендеринга OffscreenCanvas. libvips применяет отступы между изображениями, оставляя промежутки между границами ячеек, добавляет рамки, прорисовывая прямоугольники выбранной ширины и цвета, и заполняет фон, используя выбранный цвет в качестве стиля заливки перед наложением изображений.

После объединения libvips преобразует холст в изображение PNG или JPEG с помощью метода toBlob, который кодирует данные пикселей в выбранный формат. Полученный бинарный объект передается через URL. createObjectURL, создавая временный указатель в памяти, который браузер использует для предоставления файла на скачивание.

Когда загрузка завершается, libvips вызывает URL. revokeObjectURL для освобождения выделенной памяти.

Файлы обрабатываются полностью внутри вашего браузера с использованием OffscreenCanvas. Они никогда не загружаются на серверы ConvertCraft. Ваши исходные файлы остаются на устройстве — libvips считывает их в память, создает коллаж и удаляет буферы пикселей после загрузки.

Возможные проблемы

Некоторые файлы не загружаются: эти файлы превышают лимит в 20 МБ. OffscreenCanvas работает в рамках строгих ограничений памяти. Обработка изображений размером более 20 МБ требует огромных несжатых буферов пикселей в оперативной памяти, что может привести к сбою вкладки браузера.

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

Холст слишком большой: слишком много изображений с высоким разрешением создают очень большой холст. Браузеру может не хватить памяти. Уменьшите количество изображений или используйте исходные файлы с меньшим разрешением.

Коллаж выглядит неровным: макеты сетки требуют изображений с одинаковыми пропорциями. Разные соотношения сторон приводят к неравномерным отступам. Обрежьте изображения до одинаковых размеров перед загрузкой.

### Сколько изображений можно добавить?

Практический лимит зависит от доступной памяти вашего браузера. libvips обрабатывает изображения последовательно для управления ограничениями памяти. Если вы столкнулись с замедлением или сбоями, попробуйте уменьшить количество изображений.

### Можно ли настраивать положение отдельных изображений?

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

### В каком формате сохраняется результат?

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