Обрезка изображений для соцсетей
Обрежьте фото до точного размера, который ожидает платформа. Выберите пресет, сместите и масштабируйте, скачайте.
Нажмите, чтобы выбрать изображение, или перетащите его сюда
Остаётся на вашем устройстве, ничего не загружается.
Загрузите изображение и выберите пресет, чтобы увидеть предпросмотр обрезки.
Как это работает
Для каждого пресета инструмент вычисляет масштаб, необходимый, чтобы изображение
полностью покрывало целевое соотношение сторон без пустых краёв, — та же математика,
что стоит за CSS object-fit: cover, — а затем центрирует его по умолчанию.
Ползунок масштаба увеличивает картинку дальше, а ползунки смещения сдвигают видимое окно
по исходному изображению; оба параметра применяются как исходный прямоугольник,
передаваемый в canvas.drawImage, поэтому обрезка всегда рендерится из
изображения в полном разрешении, а не из уменьшенного предпросмотра.
Всё выполняется на канвасе в памяти этой вкладки. Ваше фото никогда не загружается, а скачивание идёт напрямую с этого канваса.
Частые вопросы
Как позиционируется обрезка по умолчанию?
По центру, как CSS object-fit: cover: соотношение сторон пресета вписывается так, чтобы заполнить кадр, изображение увеличивается ровно настолько, чтобы не осталось пустого пространства, а затем центрируется. Используйте ползунки панорамирования, чтобы сместить видимую часть изображения, и масштаб — чтобы обрезать плотнее.
Выдаёт ли инструмент точный размер в пикселях, рекомендуемый платформой?
Да, каждый пресет скачивается с текущими рекомендуемыми пиксельными размерами платформы, а не просто с нужным соотношением сторон, так что дополнительный шаг изменения размера не нужен.
Загружается ли моё фото куда-либо?
Нет. Обрезка происходит полностью в вашем браузере с помощью canvas API. Ничего не загружается.