Обрезать изображение по кругу

Используйте этот инструмент, чтобы обрезать изображение по кругу: вырежьте фото, логотип или снимок экрана в идеальный круг или настраиваемый овал и сохраните результат как прозрачный PNG. Перетаскивайте картинку внутри круглой маски, чтобы решить, что останется, масштабируйте, пока объект не заполнит кадр, при желании добавьте кольцо и скачайте аватар, готовый для профиля, страницы команды, обложки подкаста или презентации.

Всё выполняется в браузере через элемент HTML canvas. Фото декодируется локально, маскируется локально и экспортируется локально, поэтому оно никогда не загружается на miniwebtool: нет очереди, нет водяного знака и нет ограничения на загрузку, кроме памяти вашего устройства.

Что с этим можно сделать

Основные возможности

• Перетаскивайте, чтобы вписать, прокручивайте или сводите пальцы для масштаба: маска остаётся на месте, а фото движется за ней — то же взаимодействие, что в редакторах аватаров.
• Показать обрезаемую область: призрак отброшенных пикселей остаётся в превью, чтобы было видно, не срезали ли вы ухо или плечо.
• Круг или овал: ползунок отношения высоты к ширине превращает круг в альбомный или портретный эллипс, и холст экспорта следует той же форме.
• Поворот и отражение: шаги по 90 градусов исправляют фото с телефона боком, а отражение возвращает селфи в правильную сторону.
• Кольцевая рамка и растушёванный край: добавьте цветное кольцо в пикселях результата или смягчите ободок, чтобы аватар сливался с фоном.
• Прозрачный PNG, WebP или JPG: оставьте углы пустыми для PNG и WebP или залейте выбранным цветом для JPG.
• Пресеты размера аватара: один щелчок для типичных размеров фото профиля 320, 400, 512, 640 и 800 пикселей.
• Копируемый CSS: фрагмент воспроизводит тот же круглый аватар на веб-странице с border-radius и object-fit.

Как обрезать изображение по кругу

1. Загрузите фото: перетащите файл в область сброса, нажмите Выбрать изображение или вставьте скопированную картинку сочетанием Ctrl+V.
2. Впишите объект: перетаскивайте внутри рабочей области, чтобы сдвинуть фото, и используйте ползунок Масштаб, колесо прокрутки или жест сведения пальцев, чтобы изменить размер. Заполнить маску возвращает самую плотную обрезку, которая покрывает маску, а Вместить всё фото показывает всё фото внутри неё.
3. Выберите форму: оставьте Круг или переключитесь на Овал и задайте отношение высоты к ширине.
4. Оформите край: задайте Кольцо и его цвет, смягчите ободок Растушёвкой и выберите Прозрачный или сплошной Фон.
5. Проверьте малые превью: посмотрите версии 128, 64 и 32 пикселя под рабочей областью и увеличьте масштаб, если лицо исчезает.
6. Экспортируйте: выберите размер и формат результата, затем нажмите Скачать круглое изображение.

Размеры фото профиля, которые показываются кругом

Большинство платформ принимают квадратную загрузку и применяют собственную круглую маску в CSS. Экспорт уже круглого PNG всё равно полезен для сайтов, документов и слайдов и позволяет точно контролировать, куда падает маска. Вот безопасные размеры для загрузки:

Как рисуется круглая маска

Фото рисуется на холсте в размере результата, затем режим композиции холста переключается на destination-in и поверх заливается эллипс. Выживают только пиксели под эллипсом; всё остальное становится полностью прозрачным. Если Растушёвка больше нуля, эллипс заливается радиальным градиентом вместо сплошного цвета, поэтому значение альфы спадает постепенно и ободок затухает, а не обрывается жёсткой линией. Кольцо, если вы его добавляете, обводится после этого, чтобы маска его не стёрла.

Поскольку круг вписан в квадрат, из которого его вырезают, круглый результат всегда занимает около 78,5 процента площади квадрата, а четыре угла — то, что вы теряете. Поэтому небольшое увеличение масштаба обычно верно для портрета: макушка и плечи как раз попадают в углы, которые удаляются.

Советы, чтобы обрезка читалась при 32 пикселях

• Заполните круг лицом. Оставьте небольшой запас над головой и дайте плечам выйти за край; снимок в полный рост превращается в неразборчивую точку.
• Поместите глаза чуть выше центра. Лицо, расположенное точно посередине круга, выглядит так, будто тонет.
• Предпочитайте однотонный контрастный фон. Пёстрые детали за головой становятся визуальным шумом, когда аватар уменьшают.
• Не увеличивайте. Если исходник шириной 200 пикселей, экспорт в 800 пикселей только размоет его; экспортируйте в размере кадрированной области исходника или меньше.
• Добавьте кольцо для тёмных интерфейсов. Белое кольцо в один-два процента не даёт тёмному фото слиться с тёмной боковой панелью чата.

Часто задаваемые вопросы

Загружается ли моё фото на сервер?

Нет. Файл читает ваш браузер через FileReader API, рисует его на HTML canvas и маскирует там же. На miniwebtool ничего не отправляется, поэтому картинка остаётся на вашем устройстве даже после закрытия вкладки. Поэтому инструмент продолжает работать на медленном соединении после загрузки страницы, и нет очереди загрузки или ограничения размера файла, кроме памяти вашего устройства.

Как оставить область вне круга прозрачной?

Задайте фон «Прозрачный» и выберите PNG или WebP как формат результата. Только эти два формата хранят альфа-канал. У JPG прозрачности нет, поэтому четыре угла вокруг круга заливаются цветом фона, и инструмент автоматически переключает фон на сплошной цвет, когда вы выбираете JPG.

Почему круглый аватар после загрузки всё ещё выглядит квадратным?

Некоторые сайты при перекодировании заливки прозрачности кладут её на белый или тёмный фон, из-за чего прозрачные углы снова видны. Если так произошло, подберите цвет фона под сайт вместо прозрачности или загрузите квадратный оригинал и дайте сайту применить собственную круглую маску — большинство социальных сетей делают это в CSS.

Какого размера должно быть круглое фото профиля?

512 на 512 пикселей подходит почти для любого профиля: сайты уменьшают более крупное изображение, но никогда не добавляют детализацию мелкому. Типичные размеры: 400 пикселей для X и LinkedIn, 320 для Instagram, 512 для Discord, 640 для WhatsApp и 800 для YouTube. Используйте пресеты размера в разделе «Размер результата» и дайте сайту уменьшить картинку.

Можно ли обрезать овал вместо идеального круга?

Да. Переключите форму на «Овал» и сдвиньте ползунок отношения высоты к ширине. Отношение ниже 100 процентов даёт широкий альбомный эллипс, выше 100 процентов — высокий портретный эллипс, который подходит для кадров по грудь. Холст результата меняет форму вместе с ним, поэтому овал шириной 512 пикселей при 130 процентах экспортируется как 512 на 666 пикселей.

Ухудшает ли круглая обрезка качество фото?

Сама обрезка удаляет пиксели вне круга, но не пережимает оставшееся, если вы экспортируете PNG — это формат без потерь. Качество падает только если размер результата больше кадрированной области исходника, потому что браузеру приходится увеличивать изображение, или если вы выбираете JPG или WebP, которые с потерями. Обычная причина мягкого результата — масштаб заметно выше 100 процентов на маленьком исходнике.

Какие типы файлов можно открывать и сохранять?

Можно открыть всё, что браузер умеет декодировать как изображение: обычно это JPG, PNG, WebP, GIF, BMP, AVIF и SVG. Анимированные GIF обрезаются как один неподвижный кадр. Скачивание по умолчанию — PNG; WebP и JPG доступны в списке «Формат».