Обрезка изображений — бесплатно
Обрезайте изображения выделением перетаскиванием, опциональными ограничениями соотношения (1:1, 16:9, 4:3 и др.), сеткой правила третей и экспортом в нескольких форматах (JPEG, PNG, WebP).
Перетащите файл сюда или нажмите для выбора
JPG, PNG, WebP, HEIC, HEIF · обрабатывается на вашем устройстве
или нажмите Ctrl+V, чтобы вставить из буфера обмена
Совет: скриншот можно вставить сочетанием Ctrl+V
Ваши файлы никогда не покидают устройство. Вся обработка происходит локально в браузере.
Частые применения
- Обрезка фотографий для InstagramОбрезайте до предпочитаемых соотношений сторон Instagram: 1:1 (квадрат), 4:5 (портрет) и 1.91:1 (пейзаж).
- Обрезка фотографий профиля в квадратСоздавайте квадратные фотографии профиля для LinkedIn, Twitter, GitHub или любой платформы социальных сетей.
- Обрезка миниатюр YouTube и статейОбрезайте к соотношению сторон 16:9, используемому видео YouTube и большинством героических изображений блогов.
- Обрезка фото паспорта / удостоверения личностиОбрезайте фото до стандартного соотношения сторон портрета 2:3 для приложений паспорта, визы и удостоверения личности.
- Обрезка фотографий продуктов электронной коммерцииСтандартизируйте соотношения сторон фотографий продуктов для Amazon, Shopify, Etsy и других торговых площадок.
Как это работает
Обрезка полностью происходит в вашем браузере с использованием API HTML5 Canvas — без загрузки, без сервера. Вы перетаскиваете область выделения прямо на элементе холста, и когда вы применяете обрезку, встроенный движок рендеринга 2D браузера считывает только выбранные пиксели и перекодирует их в JPEG, PNG или WebP.
- 1Изображение загружено в памятьВаш файл считывается с помощью URL.createObjectURL(), который передаёт браузеру локальный URL blob. HTMLImageElement декодирует файл полностью во вкладке браузера — байты изображения никогда не покидают ваше устройство.
- 2Pointer Events управляет выделением обрезкиAPI Pointer Events браузера (который унифицирует ввод мыши, касания и пера) отслеживает перетаскивания на наложении холста. Нажатие вне выделения начинает новый прямоугольник; нажатие внутри перемещает его; нажатие рядом с нижним правым углом изменяет его размер. Опциональные пресеты соотношения сторон (1:1, 16:9, 4:3 и т.д.) ограничивают геометрию во время перетаскивания.
- 3Canvas рисует живой предпросмотрПри каждом изменении обрезки контекст Canvas 2D перерисовывает изображение, применяет тёмное наложение вне выделения, очищает область обрезки, чтобы показать оригинальное изображение в полной точности, и накладывает сетку правила третей и бирюзовый маркер изменения размера.
- 4toBlob() кодирует и доставляет результатКогда вы нажимаете Обрезать, создаётся новый закадровый холст с точными размерами обрезки. ctx.drawImage() копирует только выбранный прямоугольник, и canvas.toBlob() кодирует результат, используя нативный кодировщик JPEG, PNG или WebP браузера при выбранной вами настройке качества. Вывод передаётся обратно как локальный URL blob для скачивания.
Ваше изображение открывается как локальный URL blob и обрабатывается полностью внутри вашей вкладки браузера — ничего никогда не загружается ни на один сервер.
Похожие инструменты
Создатель фотоколлажей
Объедините фотографии в сетчатые коллажи с интервалом, скругленными углами и предустановками социального формата. Экспорт HD, без учетной записи, без водяного знака.
Создатель слайд-шоу из фото
Превращайте фотографии в MP4-слайд-шоу с музыкой, плавными переходами и медленным зумом. 16:9, 9:16 или квадрат, до 1080p. Создаётся в вашем браузере; ваши фото не загружаются.
Создатель картинок с цитатами
Превратите цитату в картинку, которой можно поделиться. Добавьте автора, выберите цвет, градиент или собственное фото, выберите шрифт и размер и скачайте PNG.