Обрезка изображений

Обрезка вырезает из изображения прямоугольный фрагмент и отбрасывает всё, что за его пределами. Это одна из старейших операций редактирования: она меняет композицию, не передискретизируя пиксели — фрагмент 1000×800, вырезанный из снимка 4000×3000, сохраняет каждый исходный пиксель внутри этой области в нетронутом виде. Здесь обрезка работает так же, как в настольном редакторе: тяните рамку выделения поверх превью, вводите точные числа в поля X/Y/W/H, фиксируйте соотношение сторон, когда результат должен укладываться в строгий формат (аватар, баннер, фото на документы), и экспортируйте в PNG/JPEG/WebP. Поворот и отражение применяются уже после обрезки, поэтому сохранённый файл сразу получает нужную ориентацию — это важно для печати и для приложений, которые игнорируют EXIF-ориентацию. Всё выполняется в браузере через Canvas — байты изображения никуда не отправляются, личные документы и фотографии остаются на вашем устройстве.

Обрезка логически проста — выбрать прямоугольник, скопировать его пиксели, остальное выбросить, — но сделать это хорошо в браузере означает увязать несколько вещей: превью на экране уменьшено относительно оригинала, маркеры тянутся в экранных координатах, а сама обрезка должна происходить в координатах исходного изображения, чтобы не потерять качество. При загрузке файла инструмент оборачивает его в URL.createObjectURL() для получения blob URL и передаёт в HTMLImageElement для декодирования (без копирования, гораздо меньше памяти чем data URL в base64). Натуральные ширина и высота (img.naturalWidth / naturalHeight) становятся каноническим координатным пространством — все X/Y/W/H в состоянии хранятся именно в этих пикселях. Тег <img> с превью использует max-width/max-height, чтобы браузер масштабировал картинку под контейнер; при каждой загрузке и ресайзе мы измеряем отображаемую ширину через getBoundingClientRect() и сохраняем коэффициент displayScale (рендер / оригинал). Дельты мыши при перетаскивании делятся на этот коэффициент, чтобы перевести движение на экране обратно в оригинальные пиксели — именно это держит прямоугольник обрезки точным независимо от того, насколько изображение уменьшено для показа. Сама рамка обрезки — это абсолютно позиционированный <div> поверх изображения. Каждый из её восьми маркеров (четыре угла плюс четыре стороны) на pointerdown задаёт режим ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' или 'move'); обработчик pointermove на уровне window (pointer events покрывают и мышь, и сенсорный ввод) читает текущую позицию курсора, вычисляет дельту от начала перетаскивания, переводит её в оригинальные пиксели и пересчитывает left/top/right/bottom прямоугольника. Угловые маркеры тянут размер от противоположного угла как якоря; боковые сохраняют перпендикулярную средину; режим с зафиксированным соотношением сначала определяет доминирующую ось и от неё выводит вторую. Каждый результат ограничивается рамками изображения и минимальным размером 10 px — так прямоугольник никогда не выворачивается и не выходит за пределы холста. Экспорт работает на двух офскрин-холстах. Первый получает размер натуральной ширины × высоты обрезки; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) в 9-аргументной форме вытягивает только обрезанный фрагмент — Chromium и Firefox выполняют это как GPU-копирование текстуры, без передискретизации, пока размер назначения совпадает. Если запрошены поворот или отражение, второй холст получает размер по габаритам после поворота (для 90°/270° меняем ширину и высоту местами), контекст сдвигается в его центр, ctx.rotate(angle) и ctx.scale(±1, ±1) применяют преобразование, а обрезанный холст рисуется со смещением (-w/2, -h/2). В завершение canvas.toBlob(mimeType, quality) возвращает закодированные байты как Blob; URL.createObjectURL() превращает его в URL для скачивания. Параметр quality игнорируется для PNG (без потерь) и используется как подсказка кодировщику для JPEG и WebP (0–1). Object URL отозванного блоба освобождается, когда новая обрезка заменяет прежнюю, чтобы декодированные пиксели не висели в памяти.

• Координаты обрезки (X/Y/W/H) указаны в исходных пикселях.
• Вся обработка выполняется через Canvas API в браузере.
• Рамка обрезки представляет собой абсолютно позиционированный div с 8 маркерами.
• Экспорт использует внеэкранные canvas с drawImage (9 аргументов).
• Старые Blob URL явно освобождаются при каждом переходе состояния.