Bild zuschneiden

Beim Zuschneiden wird ein rechteckiger Bereich aus einem Bild herausgeschnitten und alles außerhalb verworfen. Es ist eine der ältesten Bearbeitungsoperationen, weil sie die Bildkomposition verändert, ohne Pixel neu zu samplen — ein 1000×800-Bereich aus einem 4000×3000-Foto behält jeden Originalpixel innerhalb dieser Region unverändert. Diese Seite schneidet so zu, wie es ein Desktop-Editor tun würde: Ziehe die Auswahl über der Vorschau, gib exakte Zahlen in die Felder X/Y/W/H ein, sperre ein Seitenverhältnis, wenn die Ausgabe in eine feste Vorlage passen muss (Avatar, Banner, Passfoto), und exportiere als PNG/JPEG/WebP. Drehung und Spiegelung werden nach dem Zuschnitt angewandt, sodass die gespeicherte Datei bereits die gewünschte Ausrichtung besitzt — wichtig für den Druck und für Programme, die EXIF-Orientierungs-Tags ignorieren. Alles läuft im Browser über Canvas — die Bilddaten verlassen die Seite nie, persönliche Dokumente und Fotos bleiben also auf deinem Gerät.

Zuschneiden ist logisch einfach — Rechteck wählen, seine Pixel kopieren, den Rest verwerfen — aber es im Browser gut umzusetzen hat ein paar bewegliche Teile: Die Vorschau am Bildschirm ist eine verkleinerte Version des Originals, die Ziehgriffe arbeiten in Anzeigekoordinaten, und der tatsächliche Zuschnitt muss in den Koordinaten des Originalbilds erfolgen, damit keine Qualität verloren geht. Beim Laden einer Datei verpackt das Werkzeug sie mit URL.createObjectURL() zu einer Blob-URL und gibt sie an ein HTMLImageElement zur Dekodierung weiter (Zero-Copy, deutlich speicherschonender als eine Base64-Daten-URL). Die natürliche Breite und Höhe (img.naturalWidth / naturalHeight) werden zum kanonischen Koordinatenraum — jedes im State gespeicherte X/Y/W/H wird in diesen Pixeln ausgedrückt. Die Vorschau-<img> nutzt max-width/max-height, damit der Browser sie passend skaliert; bei jedem Laden und Größenwechsel messen wir die gerenderte Breite per getBoundingClientRect() und speichern ein displayScale-Verhältnis (gerendert / natürlich). Mausdeltas während des Ziehens werden durch dieses Verhältnis geteilt, um Anzeigebewegungen in Originalpixel zurückzurechnen — so bleibt das Zuschnittrechteck unabhängig vom Verkleinerungsfaktor exakt. Der Zuschnittrahmen selbst ist ein absolut positioniertes <div>, das über dem Bild liegt. Jeder seiner 8 Resize-Griffe (vier Ecken + vier Kanten) löst beim Mousedown einen Modus aus ('nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w' oder 'move'); der Mousemove-Listener des body liest die aktuelle Mausposition, berechnet das Delta seit dem Ziehbeginn, konvertiert es in Originalpixel und berechnet left/top/right/bottom des Rechtecks neu. Eckziehungen ändern die Größe mit der gegenüberliegenden Ecke als Anker; Kantenziehungen halten die senkrechte Mittellinie fest; verhältnisgesperrte Ziehungen ermitteln zuerst die dominante Achse und leiten daraus die andere ab. Jedes Ergebnis wird mit einer Mindestgröße von 10 px auf die Bildgrenzen geclampt, damit das Rechteck nie invertiert wird oder aus dem Canvas läuft. Der Export verwendet zwei Off-Screen-Canvas. Der erste hat die natürlichen Maße breite × höhe des Zuschnitts; ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh) zieht in der 9-Argument-Form nur den zugeschnittenen Bereich heraus — Chromium und Firefox übertragen dies per GPU als Texturkopie, sodass kein Resampling stattfindet, solange die Zielgröße nicht abweicht. Wird eine Drehung oder Spiegelung verlangt, wird ein zweiter Canvas auf die Grenzen nach der Drehung dimensioniert (Breite/Höhe bei 90°/270° tauschen), der Kontext zum Mittelpunkt verschoben, ctx.rotate(winkel) und ctx.scale(±1, ±1) wenden die Transformation an, und der zugeschnittene Canvas wird am Offset (-w/2, -h/2) gezeichnet. Schließlich liefert canvas.toBlob(mimeType, quality) die kodierten Bytes als Blob zurück; URL.createObjectURL() macht daraus eine herunterladbare URL. Die Qualität wird bei PNG (verlustfrei) ignoriert und dient bei JPEG und WebP als Hinweis für den Encoder (0–1). Die Object-URL des Blobs wird widerrufen, wenn ein neuer Zuschnitt sie ersetzt, damit dekodierte Pixeldaten nicht im Speicher hängen bleiben.

• Zuschneidekoordinaten (X/Y/W/H) basieren auf Originalpixeln.
• Alle Verarbeitung laeuft ueber die Canvas-API im Browser.
• Der Zuschnittrahmen ist ein absolut positioniertes div mit 8 Ziehpunkten.
• Der Export verwendet Offscreen-Canvas mit drawImage (9 Argumente).
• Alte Blob-URLs werden bei jedem Zustandsuebergang explizit freigegeben.