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

Как работает кадрирование изображений в браузере

Процесс кадрирования полностью выполняется в вашей вкладке браузера с помощью 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 МБ, вы можете сначала уменьшить его с помощью специального инструмента для изменения размера, а затем загрузить сюда для кадрирования.

Работает ли кадрирование на мобильных телефонах и планшетах?

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