Ein Bild zuschneiden _

Wie browserbasiertes Bildzuschneiden funktioniert

Der Zuschneidevorgang läuft vollständig in Ihrem Browser-Tab mit der Canvas API ab. Keine Serververarbeitung, keine Uploads, keine Drittanbieterdienste. Jeder Schritt geschieht auf Ihrem Gerät.

1. Laden Sie das Bild in ein <img>-Element, damit der Browser es lokal dekodiert. Ein Canvas-Overlay rendert das Bild skaliert, um in den Viewport zu passen, während ein ziehbares Auswahlrechteck den aktuellen Zuschneidebereich zeigt.
2. Ziehen Sie das Rechteck an seinen Kanten oder Ecken, um den Zuschneidebereich anzupassen. Das Rechteck bleibt an den Bildgrenzen verankert, sodass Sie keinen Bereich außerhalb des Fotos auswählen können. Wenn ein festes Seitenverhältnis aktiv ist (1:1, 16:9, 4:3), bewahrt die Größenänderung dieses Verhältnis automatisch.
3. Die Pixelanzeige wird während des Ziehens live aktualisiert und zeigt die aktuelle Breite, Höhe, X- und Y-Position des Zuschnitts in Bildpixelkoordinaten. Damit können Sie exakte Abmessungen ohne Rätselraten anvisieren.
4. Wenn Sie auf Zuschneiden und Herunterladen klicken, zeichnet die Seite nur den ausgewählten Bereich des Quellbildes auf eine Offscreen-Canvas in der ursprünglichen Pixelauflösung und exportiert das Ergebnis via canvas.toBlob() im gleichen Format wie die Quelldatei. Eine Blob-URL wird für den Download generiert.

Warum Bilder online zuschneiden?

• Zuschneiden entfernt unerwünschte Ränder, leeren Raum oder visuelles Durcheinander. Ein einziger Zuschnitt verbessert oft die Bildkomposition mehr als jeder Filter oder jede Farbanpassung.
• Die Kontrolle des Seitenverhältnisses ist für Publikationsplattformen unerlässlich. Social-Media-Feeds erwarten 1:1 für Profile, 16:9 für Video-Thumbnails und 4:3 für Standardfotografie. Mit dem richtigen Verhältnis zuzuschneiden vermeidet lästiges Letterboxing oder Beschneidungen beim Hochladen.
• Clientseitiger Zuschnitt ist die einzige Option auf eingeschränkten Firmengeräten ohne Fotoeditor. Da nichts hochgeladen wird, gibt es kein Datenleckrisiko und keine Compliance-Prüfung für sensible Bilder.
• Die Live-Dimensionsanzeige macht Rätselraten überflüssig. Sie sehen die Pixelkoordinaten und die Auswahlgröße während des Ziehens, sodass Sie auf eine exakte Breite und Höhe zuschneiden können, ohne zu einem Pixelmesswerkzeug wechseln zu müssen.

Häufige Zuschnittanwendungen

Zuschneiden ist eine der häufigsten Bildbearbeitungen in der Webpublikation, in sozialen Medien und in der Softwareentwicklung. Hier sind drei Muster, bei denen ein browserbasierter Zuschneider Zeit spart.

• Produktfotos für einen Online-Shop vorbereiten. Auf ein konsistentes 1:1- oder 4:5-Seitenverhältnis zuschneiden, damit jede Katalogminiatur im Raster ausgerichtet ist. Der Export bewahrt das Originalformat, sodass JPEG-Produktfotos JPEG bleiben.
• Screenshots für Dokumentation oder Fehlerberichte zuschneiden. Entfernen Sie die Browser-Symbolleiste, die Windows-Taskleiste oder sensible Benachrichtigungen, bevor Sie das Bild an einen Ticket- oder Pull-Request anhängen.
• Ein Hero-Bild oder Banner für eine Landingpage einrahmen. Sperren Sie die 16:9-Voreinstellung, positionieren Sie den wichtigsten Teil des Fotos in der Mitte des Zuschneiderechtecks und exportieren Sie in der Originalauflösung für die beste Qualität auf Retina-Displays.

Ein Praxisbeispiel: Zuschneiden eines 4000×3000-Fotos auf 1200×675 für ein Hero-Banner

Ein 4000×3000-Pixel-Foto einer Digitalkamera ist für ein typisches Web-Hero-Banner viel zu groß. Der Bannerplatz kann 1200×675 (ein 16:9-Rahmen) sein.

Legen Sie das Foto in die Upload-Zone. Das Bild wird in voller Auflösung geladen, aber skaliert, um in den Viewport zu passen, für eine komfortable Zieh-Interaktion. Wählen Sie die 16:9-Seitenverhältnis-Voreinstellung. Das Zuschneiderechteck rastet sofort auf die breiteste 16:9-Region ein, die ins Bild passt. Ziehen Sie das Rechteck, um den Fokuspunkt — einen Berggipfel, ein Produkt, ein Gesicht — im Rahmen zu positionieren. Die Live-Anzeige zeigt die aktuelle Auswahl bei 4000×2250 (das 16:9-Fenster des gesamten Bildes). Greifen Sie einen Eckgriff und ziehen Sie nach innen, bis die Breitenanzeige 1200 px erreicht. Die Höhe folgt automatisch, da das Verhältnis gesperrt ist. Klicken Sie auf Zuschneiden und herunterladen. Die Seite extrahiert die ausgewählte 1200×675-Region aus den Originalpixeln und liefert die zugeschnittene Datei im Quellformat. Der gesamte Vorgang dauert ein bis zwei Sekunden und verbraucht nach dem anfänglichen Laden der Seite keine Netzwerkbandbreite.

Welche Bildformate werden für den Zuschnitt unterstützt?

Das Tool akzeptiert jedes Format, das der Browser dekodieren kann: PNG, JPEG und WebP decken fast alle realen Anwendungsfälle ab. Die zugeschnittene Ausgabe wird im gleichen Format wie die Quelldatei gespeichert. PNG bleibt verlustfrei, JPEG behält seine ursprüngliche Qualitätsstufe und WebP bleibt WebP. Das Format wird aus dem MIME-Typ der Quelldatei erkannt.

Reduziert der Zuschnitt die Bilddateigröße?

Zuschneiden entfernt Pixel, daher ist die Ausgabedatei in der Regel kleiner als die Quelle, insbesondere wenn Sie einen großen Rand oder einen leeren Bereich wegschneiden. Der Export verwendet das ursprüngliche Dateiformat und seine Kodierungsparameter — PNG bleibt verlustfrei, JPEG behält seine ursprüngliche Qualitätseinstellung — die einzigen Einsparungen kommen also von der reduzierten Pixelanzahl, nicht von der Neukompression.

Was bewirken die Seitenverhältnis-Voreinstellungen?

Die Voreinstellungen (1:1, 16:9, 4:3, 3:2, 9:16) sperren das Breite-Höhe-Verhältnis des Zuschneiderechtecks. Wenn eine Voreinstellung aktiv ist, passt das Ziehen einer Ecke oder Kante die Auswahlgröße an, während das Verhältnis konstant bleibt. Durch Umschalten in den freien Modus wird die Einschränkung aufgehoben, sodass Sie das Rechteck beliebig dimensionieren können. Das Verhältnis wird auf Bildpixelkoordinaten angewendet, sodass die exportierte Ausgabe genau das von Ihnen gewählte Seitenverhältnis hat.

Wird das Bild an einen Server hochgeladen?

Nein. Das Bild verlässt niemals Ihr Gerät. Die Seite verwendet die File-API des Browsers, um das Bild in den Speicher zu lesen, und die Canvas API, um das Ergebnis zuzuschneiden und zu exportieren. Sie können dies überprüfen, indem Sie das Network-Panel der DevTools Ihres Browsers öffnen — die einzigen ausgehenden Anfragen während des Zuschnitts sind der anfängliche Seitenaufruf und Werbeaufrufe. Es werden keine Bilddaten übertragen.

Kann ich einen bestimmten Bereich durch Eingabe exakter Pixelkoordinaten zuschneiden?

Die aktuelle Version passt das Zuschneiderechteck durch Zieh-Interaktion auf der Bildvorschau an. Sie können die Live-Pixelkoordinaten für X, Y, Breite und Höhe der Auswahl ablesen. Eine direkte numerische Eingabe für das Zuschneiderechteck ist in v1 nicht verfügbar, aber für ein zukünftiges Update geplant.

Was passiert mit dem Originalbild?

Die Originaldatei bleibt auf Ihrem Gerät. Die Seite liest sie in den Browserspeicher zur Anzeige und zum Zuschneiden, ändert aber nie die Quelldatei auf der Festplatte. Die zugeschnittene Ausgabe ist eine neue Datei, die Sie separat herunterladen. Das Original bleibt unberührt an seinem ursprünglichen Ort auf Ihrem Computer oder Telefon.

Gibt es eine Dateigrößenbeschränkung für den Zuschnitt?

Das Tool respektiert ein Limit von 30 MB pro Datei in der Upload-Zone, um den Browserspeicher auf leistungsschwächeren Geräten unter Kontrolle zu halten. Wenn Ihr Bild größer als 30 MB ist, können Sie es zuerst mit einem dedizierten Bildgrößen-Tool verkleinern, bevor Sie es hier zum Zuschneiden laden.

Funktioniert der Zuschnitt auf Mobiltelefonen und Tablets?

Ja. Die Zuschneidegriffe sind mit Blick auf Touch-Ziele dimensioniert, und die Interaktion verwendet Pointer-Events, die sowohl mit Mausklicks als auch mit Fingerberührungen funktionieren. Auf einem Telefonbildschirm passt sich die Bildvorschau an die verfügbare Breite an, und die Bedienelemente stapeln sich vertikal für eine einfache Einhandbedienung.