Кадрувати зображення _

Як працює кадрування зображень у браузері

Процес кадрування повністю виконується у вашій вкладці браузера за допомогою Canvas API. Жодної серверної обробки, жодних завантажень, жодних сторонніх сервісів. Кожен крок відбувається на вашому пристрої.

1. Завантажте зображення в елемент <img>, щоб браузер декодував його локально. Накладання canvas відображає зображення, масштабоване під вікно перегляду, а перетягуваний прямокутник виділення показує поточну область кадрування.
2. Перетягуйте прямокутник за краї або кути, щоб налаштувати область кадрування. Прямокутник залишається в межах зображення, тому не можна вибрати область за межами картинки. Коли активне фіксоване співвідношення сторін (1:1, 16:9, 4:3), зміна розміру автоматично зберігає це співвідношення.
3. Лічильник пікселів оновлюється в реальному часі під час перетягування, показуючи поточну ширину, висоту та позиції X і Y кадрування в координатах пікселів зображення. Це дає змогу цілитися в точні розміри без вгадувань.
4. Коли ви натискаєте «Кадрувати та завантажити», сторінка відмальовує лише вибрану область вихідного зображення на позаекранному canvas в оригінальному роздільненні пікселів, потім експортує результат через canvas.toBlob() у тому ж форматі, що й вихідний файл. Генерується Blob URL для завантаження.

Навіщо кадрувати зображення онлайн?

• Кадрування прибирає непотрібні краї, порожній простір або візуальний шум. Один прохід кадрування часто покращує композицію фото більше, ніж будь-який фільтр чи кольорокорекція.
• Контроль співвідношення сторін необхідний для публікаційних платформ. Стрічки соцмереж очікують 1:1 для профілів, 16:9 для відеомініатюр і 4:3 для стандартної фотографії. Кадрування під правильне співвідношення запобігає негарному letterboxing або обрізанню країв під час завантаження.
• Кадрування на стороні клієнта — єдиний варіант на корпоративних пристроях без фоторедактора. Оскільки нічого не завантажується на сервер, немає ризику витоку даних і не потрібна перевірка відповідності для чутливих зображень.
• Живий підрахунок розмірів усуває вгадування. Ви бачите піксельні координати та розмір виділення під час перетягування, тому можете кадрувати до точної ширини та висоти без перемикання на вимірювальний інструмент.

Типові сценарії кадрування

Кадрування — одне з найпоширеніших редагувань зображень у веб-публікаціях, соціальних мережах і розробці ПЗ. Ось три сценарії, де браузерний інструмент для кадрування економить час.

• Підготовка фотографій товарів для інтернет-магазину. Кадруйте до єдиного співвідношення 1:1 або 4:5, щоб усі мініатюри в каталозі рівно вирівнювалися в сітці. Експорт зберігає вихідний формат, тому JPEG-фото товарів залишаються в JPEG.
• Обрізка скріншотів для документації або звітів про помилки. Виріжте панель інструментів браузера, панель завдань Windows або конфіденційні сповіщення перед прикріпленням зображення до задачі або pull request.
• Кадрування hero-зображення або банера для лендінгу. Зафіксуйте пресет 16:9, розмістіть найважливішу частину фото в центрі прямокутника кадрування та експортуйте в оригінальному роздільненні для найкращої якості на retina-дисплеях.

Приклад: кадрування фото 4000×3000 до 1200×675 для hero-банера

Фото 4000×3000 пікселів з цифрової камери занадто велике для типового веб-банера. Місце для банера може бути 1200×675 (кадр 16:9).

Перетягніть фото в зону завантаження. Зображення завантажується в повному роздільненні, але масштабується під вікно перегляду для зручного перетягування. Виберіть пресет співвідношення сторін 16:9. Прямокутник кадрування миттєво прив'язується до найширшої області 16:9, яка вміщається в зображення. Перетягніть прямокутник, щоб розмістити фокусну точку — гірську вершину, товар або обличчя людини — в кадрі. Живий лічильник показує поточне виділення як 4000×2250 (вікно 16:9 усього зображення). Візьміться за кут і тягніть всередину, поки ширина не досягне 1200 px. Висота автоматично слідує за шириною, оскільки співвідношення зафіксовано. Натисніть Кадрувати та завантажити. Сторінка витягує вибрану область 1200×675 з вихідних пікселів і видає обрізаний файл у форматі джерела. Весь процес займає секунду-дві та не використовує пропускну здатність мережі, крім початкового завантаження сторінки.

Які формати зображень підтримуються?

Інструмент приймає будь-який формат, який браузер може декодувати: PNG, JPEG і WebP покривають практично всі реальні сценарії використання. Обрізаний результат зберігається в тому ж форматі, що й вихідний файл. PNG залишається без втрат, JPEG зберігає свій вихідний рівень якості, а WebP залишається WebP. Формат визначається за MIME-типом вихідного файлу.

Чи зменшує кадрування розмір файлу?

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

Що роблять пресети співвідношення сторін?

Пресети (1:1, 16:9, 4:3, 3:2, 9:16) фіксують співвідношення ширини та висоти прямокутника кадрування. Коли пресет активний, перетягування будь-якого кута або краю змінює розмір виділення при збереженні постійного співвідношення. Перемикання у вільний режим знімає обмеження, дозволяючи довільно змінювати розмір прямокутника. Співвідношення застосовується до координат пікселів зображення, тому експортований результат має точно вибране співвідношення сторін.

Чи завантажується зображення на сервер?

Ні. Зображення ніколи не покидає ваш пристрій. Сторінка використовує File API браузера для читання зображення в пам'ять і Canvas API для кадрування та експорту. Ви можете перевірити це, відкривши панель Network у DevTools браузера — єдині вихідні запити під час кадрування — це початкове завантаження сторінки та рекламні виклики. Жодні дані зображення не передаються.

Чи можу я кадрувати певну область, ввівши точні координати пікселів?

Поточна версія дозволяє налаштовувати прямокутник кадрування через перетягування на попередньому перегляді зображення. Ви можете зчитувати живі піксельні координати X, Y, ширини та висоти виділення. Пряме числове введення для прямокутника кадрування недоступне в v1, але заплановане як покращення в майбутньому оновленні.

Що відбувається з вихідним зображенням?

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

Чи є обмеження на розмір файлу для кадрування?

Інструмент дотримується ліміту 30 МБ на файл у зоні завантаження, щоб тримати пам'ять браузера під контролем на пристроях з низькою продуктивністю. Якщо ваше зображення більше 30 МБ, ви можете спочатку зменшити його за допомогою спеціального інструмента для зміни розміру, а потім завантажити сюди для кадрування.

Чи працює кадрування на мобільних телефонах і планшетах?

Так. Ручки кадрування мають розмір, зручний для дотику, а взаємодія використовує події вказівника, які працюють як із кліками миші, так і з натисканнями пальця. На екрані телефону попередній перегляд зображення адаптується до доступної ширини, а елементи керування розташовуються вертикально для зручного використання однією рукою.