Как повернуть изображение без потери качества
Почему фото с телефона оказываются на боку, что поворот делает с пикселями и как выровнять кривой горизонт в браузере, ничего не загружая на сервер.
На телефоне фото выглядит нормально. Отправляете его по почте или загружаете в карточку товара — и там оно лежит на боку. Файл не испортился. Он просто изначально не был повёрнут.
Камера телефона сохраняет кадр так, как его считала матрица, и дописывает в EXIF небольшое поле Orientation: «перед показом поверни на 90°». Значение 6 означает четверть оборота по часовой стрелке, значение 3 — переворот вверх ногами, и так далее, всего восемь вариантов. Галерея на телефоне это поле читает. Любой современный браузер тоже. А вот многие другие программы — нет: старые загрузчики в CMS, часть сервисов печати, немало настольных просмотрщиков и почти все скрипты обработки картинок, которые никто не обновлял. Они показывают пиксели как есть и не смотрят на приписку к ним. (В том же блоке EXIF лежат и GPS-координаты — именно поэтому удаление EXIF-метаданных вынесено в отдельный инструмент.)
Решение — перестать полагаться на приписку. Поверните сами пиксели, и снимок будет правильно читаться везде. Этим и занимается поворот и отражение изображений: прямо в браузере, без отправки файла куда-либо.
Четверть оборота бесплатна, произвольный угол — нет
Поворот на 90°, 180° или 270° — это просто перестановка. Каждый пиксель переезжает на новые координаты, но сохраняет своё точное значение: тот, что был в точке (0, 0), оказывается в (height-1, 0), и на этом всё. Никакой интерполяции, никакого замыливания.
Поверните на 7° — и арифметика станет другой. Пиксели попадают между позициями сетки, поэтому каждый итоговый пиксель приходится усреднять из нескольких исходных. Мелкие детали чуть размягчаются, края букв слегка плывут, а резкая диагональная линия обзаводится еле заметной лестницей. За один проход на фотографии это почти не видно. Зато три прохода по 2° заметно хуже одного прохода на 6° — хороший повод подобрать угол до сохранения, а не после.
С экспортом в JPEG есть и вторая плата: формат каждый раз сжимает картинку заново. Повернули, сохранили, увидели, что промахнулись на градус, повернули ещё раз, сохранили — изображение прошло через два сжатия с потерями. Пока экспериментируете, сохраняйте промежуточные шаги в PNG, а JPEG берите только для финальной версии.
Под углом холст становится больше
Поверните прямоугольник не на прямой угол — и его габаритная рамка вырастет. Снимку 4000 × 3000, повёрнутому на 5°, нужен холст 4246 × 3337, и четыре угла этого холста пустые: исходная картинка лежит внутри него наискосок.
В эти треугольники что-то должно попасть. PNG и WebP умеют оставить их прозрачными. JPEG не умеет и заливает их выбранным цветом, по умолчанию белым. Инструмент показывает настройку заливки, едва угол перестаёт быть кратным 90, а предпросмотр и есть итоговый холст — пустоты видно до скачивания.
Чаще всего эти пустоты не нужны вовсе. Сначала выровняйте кадр, затем прогоните результат через обрезку изображений и подрежьте внутрь, пока не останется только реальное фото. Тонкая рамка по краю потеряется — это цена выравнивания, и обойти её нельзя.
Отражение — не поворот
Их путают постоянно, а разница существенная. Поворот на 180° переворачивает снимок вверх ногами; отражение по горизонтали зеркалит его слева направо. В обоих случаях портрет выглядит «не так», но содержимое меняет только отражение. Любой текст в кадре окажется задом наперёд, часы переедут на другую руку, а отсканированный документ станет нечитаемым.
Зеркалить стоит селфи с веб-камеры, которое вышло перевёрнутым, или спрайт, где персонаж должен смотреть в другую сторону. Для фото, которое просто стоит вверх ногами, отражение — неверный ход.
Одна деталь, о которой полезно знать: здесь отражение зеркалит то, что видно на экране, а не исходную сетку пикселей. После поворота на 90° «отразить по горизонтали» по-прежнему зеркалит слева направо в предпросмотре — как в настольном редакторе. Инструменты, которые применяют отражение к исходнику, удивят вас вертикальным зеркалом вместо горизонтального.
Выравниваем кривой горизонт
Съёмка с рук всегда немного уводит. Морской горизонт, наклонённый на 1,5°, бросается в глаза, даже если не сразу понятно, что именно не так.
Двигайте ползунок угла маленькими шагами и следите за горизонтом по краю рамки предпросмотра. Поправка обычно укладывается в 0,5–3°; если нужно больше 5°, стоит проверить, не был ли наклон задуман специально. Отпустите ползунок рядом с четвертью оборота — он притянется к ровным 90°, так что сохранить случайные 89,5° не получится.
Когда картинка загружена, с клавиатуры быстрее: [ и ] — повороты на четверть, H и V — два отражения, 0 — сбросить всё и начать заново.
Исправьте ориентацию один раз
Перетащите фото в поворот и отражение изображений, доверните до нужного вида и скачайте. Поворот запечётся в пикселях, поэтому останется на месте в любом загрузчике и просмотрщике, куда вы отправите файл, — а сам файл при этом не покидал ваш компьютер.