Bildzuschnitt (Image Cropper)
Schneiden Sie Bilder mit exakten Pixelgrenzen, voreingestellten Seitenverhältnissen (1:1, 4:3, 16:9) oder kreisförmigem Avatar-Zuschnitt zu. Bearbeiten Sie Fotos privat direkt in Ihrem Browser, ohne Dateien auf externe Server hochzuladen.
Anleitung
Laden Sie ein JPG-, PNG- oder WebP-Foto hoch, indem Sie es in die Dropzone ziehen oder eine Datei auswählen.
Wählen Sie ein voreingestelltes Seitenverhältnis wie 1:1 (Quadrat), 16:9 (Breitbild) oder Freiform.
Passen Sie den Zuschneiderahmen durch Ziehen der Ecken oder Eingabe exakter Breiten- und Höhenwerte an.
Prüfen Sie den Bildausschnitt in der Echtzeit-Vorschau und laden Sie das Ergebnis im Format WebP, PNG oder JPEG herunter.
So funktioniert das clientseitige Zuschneiden von Bildern
Beim Zuschneiden wird ein Teilbereich (definiert durch den horizontalen Versatz x, den vertikalen Versatz y, die Begrenzungsbreite width und die Begrenzungshöhe height) aus einem Quell-Rasterbild extrahiert. In modernen Webanwendungen verwendet diese Operation die HTML5-Methode CanvasRenderingContext2D.drawImage() mit 9 Parametern: drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Dies weist die Rendering-Engine an, direkt aus den angegebenen Koordinaten der Quell-Bitmap zu lesen und in ein Ziel-Canvas zu schreiben, ohne die umgebenden Pixel zu verändern.
Gängige Voreinstellungen für Seitenverhältnisse
Verschiedene Plattformen erfordern spezifische Seitenverhältnisse, um unerwünschtes automatisches Zuschneiden oder Verzerrungen zu verhindern:
| Seitenverhältnis | Dezimalverhältnis | Typische Anwendungsbereiche |
|---|---|---|
| 1:1 (Quadratisch) | 1.000 | Profil-Avatare, Instagram-Feed-Beiträge, Produktkatalog-Vorschaubilder |
| 4:3 (Standard) | 1.333 | Klassische Fotografie, Tablet-Displays, Präsentationsfolien |
| 16:9 (Breitbild) | 1.778 | YouTube-Video-Thumbnails, moderne Monitore, Präsentationen |
| 9:16 (Vertikal) | 0.562 | Mobile Stories, TikTok, Instagram Reels, YouTube Shorts |
| 3:2 (Klassisch 35mm) | 1.500 | DSLR-Kamerasensoren, Standard-Fotoabzüge |
Kreisförmiger Avatar-Zuschnitt
Für Social-Media-Profile und Kopfzeilen ist ein runder Rahmen ideal. Wenn der Kreis-Zuschnittmodus aktiviert ist, wendet das Canvas einen elliptischen Pfad (ctx.arc()) an, um eine kreisrunde Maske zu rendern. Die Datei wird als transparente 32-Bit-PNG- oder WebP-Datei gespeichert und fügt sich nahtlos über jeden Hintergrund ein.
100% Datenschutz – keine Serverübertragung
Fotos und Mitarbeiterporträts enthalten häufig sensible Details oder EXIF-Geodaten. Dieses Werkzeug arbeitet vollständig innerhalb der lokalen JavaScript-Sandbox Ihres Browsers. Es werden keine Bilddaten oder Koordinaten an fremde Server übermittelt.
Häufig gestellte Fragen
Verringert das Zuschneiden die Bildauflösung?
Das Zuschneiden entfernt lediglich Pixel außerhalb des ausgewählten Rahmens. Der verbleibende Bildausschnitt behält 100% seiner ursprünglichen Pixeldichte und Auflösung bei.
Kann ich ein Bild kreisförmig zuschneiden?
Ja. Aktivieren Sie die Option 'Kreisförmiger Zuschnitt', um das Bild mit transparentem Hintergrund rund zuzuschneiden – perfekt für Profilbilder.
Welche Dateiformate werden für den Export unterstützt?
Sie können das zugeschnittene Bild als PNG (empfohlen für transparente runde Zuschnitte), WebP (modernes, hocheffizientes Format) oder JPEG herunterladen.
Werden meine Bilder an einen externen Server übertragen?
Nein. Sämtliche Berechnungen und Canvas-Exporte finden ausschließlich lokal in Ihrem Browser statt. Ihre Fotos verlassen niemals Ihr Gerät.
Was passiert, wenn die eingegebenen Maße größer als das Originalbild sind?
Die Zuschneidekoordinaten werden automatisch an die tatsächlichen Abmessungen des Quellbildes angepasst, um Bildfehler zu vermeiden.