Crop
Crop (Image Region Selection)
The operation of selecting and keeping only a rectangular portion of an image while discarding everything outside the selected area, used to improve composition, remove unwanted elements, or adjust aspect ratio.
技術的詳細
Cropping extracts a sub-rectangle defined by (x, y, width, height) coordinates from the pixel grid. Unlike scaling, cropping does not change pixel values or introduce interpolation artifacts. In the Canvas API, ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) crops during drawing. Common presets include 1:1 (square/social media), 16:9 (widescreen), 4:3 (traditional), and 3:2 (DSLR). Smart crop algorithms (saliency-based) automatically detect the most important region of an image. Cropping to different aspect ratios is also used for responsive images via the CSS object-fit and object-position properties.
例
```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
);
```