Crop
Zuschneiden (Bildbereichsauswahl)
Die Operation, bei der nur ein rechteckiger Ausschnitt eines Bildes ausgewählt und beibehalten wird, während alles außerhalb des ausgewählten Bereichs verworfen wird. Verwendet zur Verbesserung der Komposition, Entfernung unerwünschter Elemente oder Anpassung des Seitenverhältnisses.
Technisches Detail
Das Zuschneiden extrahiert ein Unterrechteck, definiert durch (x, y, Breite, Höhe)-Koordinaten, aus dem Pixelraster. Im Gegensatz zur Skalierung ändert das Zuschneiden keine Pixelwerte und führt keine Interpolationsartefakte ein. In der Canvas-API schneidet ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) beim Zeichnen zu. Gängige Voreinstellungen umfassen 1:1 (quadratisch/Social Media), 16:9 (Breitbild), 4:3 (traditionell) und 3:2 (DSLR). Smart-Crop-Algorithmen (salienzbasiert) erkennen automatisch den wichtigsten Bereich eines Bildes. Das Zuschneiden auf verschiedene Seitenverhältnisse wird auch für responsive Bilder über die CSS-Eigenschaften object-fit und object-position verwendet.
Beispiel
```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
);
```