Об этом инструменте
Фото профиля, значок приложения или миниатюра товара часто выглядят лучше со скруглёнными углами или обрезанными в идеальный круг — обычно для этого приходится открывать полноценный редактор изображений, просто чтобы не оставить заметный цвет фона. Этот инструмент обрезает загруженное изображение прямо на HTML canvas: задайте радиус скругления прямоугольника в пикселях или в процентах от короткой стороны изображения, выберите, какие углы скруглить, или переключитесь в режим круга, чтобы вырезать из изображения центрированный квадрат и полностью скруглить его в круг. Живой предпросмотр обновляется при изменении настроек, а фон в клетку точно показывает, какие части изображения станут прозрачными.
Вывод в PNG полностью сохраняет эту прозрачность — скруглённые углы или всё, что за пределами круга, действительно прозрачны, а не залиты белым или чёрным, поэтому результат аккуратно ложится на любой фон. Если вместо этого нужен JPEG, выберите цвет фона — им будет залита обрезанная область, поскольку у JPEG нет альфа-канала для хранения прозрачности. Всё выполняется локально через Canvas API — изображение декодируется, обрезается и перекодируется полностью в браузере и никогда не загружается на сервер.
Частые вопросы
Почему на моём скруглённом изображении белый/чёрный фон вместо прозрачного?
Скорее всего, вы выбрали вывод в JPEG, который вообще не поддерживает прозрачность — любая область за пределами вашей скруглённой формы вместо этого заполняется сплошным цветом фона (который вы можете выбрать). Переключите формат вывода на PNG, чтобы получить настоящую прозрачность за пределами скруглённой/круглой формы.
В режиме круга почему часть моего широкого фото была обрезана?
Круг может быть вписан только в КВАДРАТ, поэтому для любого неквадратного фото режим круга сначала обрезает до центрированного квадрата, используя более короткую сторону из ширины/высоты, а затем скругляет этот квадрат до круга — для широкого пейзажного фото это означает, что левый и правый края обрезаются. Если вам нужно сохранить определённую часть широкого фото, сначала используйте инструмент обрезки изображения, чтобы вручную выбрать эту квадратную область, а затем пропустите её через этот инструмент.