Обрезать изображение
Перетащите рамку по изображению, чтобы обрезать его. Произвольная форма или фиксация на распространённой пропорции — обрезка выполняется в полном разрешении.
Нажмите, чтобы выбрать изображение, или перетащите его сюда
JPG, PNG, WebP. Остаётся на вашем устройстве, ничего не загружается.
Обрезанное изображение появится здесь после создания.
Сначала выберите соотношение сторон, если оно вам нужно (например, 1:1 для фото профиля), затем перетащите рамку в нужное положение. Обрезка выполняется в полном разрешении вашего изображения, а не в размере отображения превью, поэтому результат остаётся чётким.
Как это работает
Ваш файл загружается через URL.createObjectURL — локальную ссылку в памяти, а не загрузку на сервер, — и отображается уменьшенным, чтобы поместиться в редакторе. Рамка обрезки, которую вы перетаскиваете, отслеживается в экранных пикселях, но в момент нажатия «обрезать» эти координаты умножаются на соотношение между естественным размером изображения и его отображаемым размером. Так что если ваше фото на 4000 пикселей показано шириной 800 пикселей, рамка шириной 200 пикселей на экране выделяет область шириной 1000 пикселей на реальном изображении. Выделенный прямоугольник затем копируется с помощью формы исходного прямоугольника метода drawImage API canvas, которая извлекает именно эти пиксели из оригинала полного разрешения.
Формат вывода соответствует формату ввода: PNG на входе — PNG на выходе (без потерь, попиксельно идентичен исходной области), всё остальное перекодируется в JPEG с качеством 92% через canvas.toBlob. Это различие стоит знать: обрезка JPEG означает одно дополнительное поколение JPEG-сжатия, обычно незаметное при 92%, но реальное. Если вам нужна попиксельно точная обрезка, подайте инструменту PNG.
Всё вышеперечисленное происходит в собственном декодере изображений и canvas вашего браузера. Откройте вкладку Network в DevTools перед тем, как перетащить фото: ни один запрос никогда не передаёт изображение, а это также означает отсутствие ограничения размера на стороне сервера и отсутствие очереди.