🍋
Menu
Image

Crop

Кадрирование (выделение области изображения)

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

Техническая деталь

Кадрирование извлекает подобласть, определённую координатами (x, y, ширина, высота) из пиксельной сетки. В отличие от масштабирования, кадрирование не изменяет значения пикселей и не вносит артефакты интерполяции. В Canvas API ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) выполняет кадрирование при отрисовке. Распространённые пресеты: 1:1 (квадрат/соцсети), 16:9 (широкоформатный), 4:3 (традиционный) и 3:2 (зеркальные камеры). Алгоритмы «умного» кадрирования (на основе значимости) автоматически определяют наиболее важную область изображения. Кадрирование с разными соотношениями сторон также используется для адаптивных изображений через CSS-свойства object-fit и object-position.

Пример

```javascript
// Crop image to specific region
const canvas = document.createElement('canvas');
canvas.width = cropWidth;
canvas.height = cropHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(
  img,
  cropX, cropY, cropWidth, cropHeight,  // source rect
  0, 0, cropWidth, cropHeight            // dest rect
);
```

Связанные инструменты

Связанные термины