Посібник зі створення колажів

Об'єднуйте кілька зображень у сітку, вільний макет або колаж у стилі журналу. Налаштовуйте відступи, рамки, колір фону та співвідношення сторін. Усі операції виконуються локально у вашому браузері — без завантаження на будь-який сервер.

Що вам потрібно

Браузер — 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 для меншого розміру файлу зі стисненням із втратами. Вибір формату доступний перед завантаженням.