Bild & Foto

Fotoannotator

Fügen Sie Pfeile, Sprechblasen, Rechtecke, Freihandzeichnungen und Beschriftungen über jedes Foto oder jeden Screenshot hinzu — ziehen Sie, um die Position zu ändern, jederzeit rückgängig machen, als PNG, JPG oder WebP exportieren.

Drop a photo to annotate

or click to browse — JPG, PNG, or WebP up to 50 MB.

Private by design. Your photo, the annotations, and the export are all processed in your browser via the Canvas API. Nothing leaves your device.

Was ist ein Fotoannotator?

Ein Fotoannotator ermöglicht es Ihnen, auf einem Foto oder Screenshot zu zeichnen, um etwas hervorzuheben, darauf zu zeigen oder zu beschriften. Im Gegensatz zu einem vollständigen Editor ändert er die zugrunde liegenden Pixel nicht — Ihre Sprechblasen leben als eine Schicht von Vektorgrafik-ähnlichen Formen (Pfeile, Rechtecke, Text, Freihandstriche), die erst beim Export in das Bild eingebettet werden. Das macht es perfekt für Fehlerberichte, Design-Feedback, Rezeptschritte, Hausaufgaben von Kindern, Immobilienanzeigen und das tägliche 'sehen Sie dieses Ding hier' Problem. Dieses Tool bietet Ihnen fünf Werkzeuge (Auswählen, Text, Pfeil, Rechteck, Freihand), eine Farbpalette plus einen vollständigen Farbwähler und vier Strichbreiten. Alles läuft in Ihrem Browser, sodass Screenshots mit sensiblen Inhalten Ihr Gerät niemals verlassen.

Wie man ein Foto annotiert

1
Foto oder Screenshot ablegen
Ziehen Sie eine JPG-, PNG- oder WebP-Datei in den Upload-Bereich oder klicken Sie, um von Ihrem Gerät auszuwählen. Screenshots, Handyfotos, Produktbilder — alles, was Browser rendern können, funktioniert.
2
Wählen Sie ein Werkzeug und eine Farbe
Verwenden Sie Pfeil, um auf etwas zu zeigen, Rechteck, um es einzurahmen, Freihand, um zu umkreisen oder zu kritzeln, und Text, um eine Beschriftung hinzuzufügen. Wählen Sie eine Farbe aus der Palette oder öffnen Sie den Farbwähler für jeden Hex-Wert.
3
Klicken und ziehen Sie auf das Bild
Ziehen Sie, um Pfeile und Rechtecke zu zeichnen. Ziehen Sie mit Freihand, um zu kritzeln. Mit dem Textwerkzeug geben Sie zuerst Ihre Beschriftung ein und klicken dann auf das Foto, um sie dort abzulegen, wo Sie möchten.
4
Positionieren oder rückgängig machen
Wechseln Sie zu Auswählen und ziehen Sie dann eine Annotation, um sie zu verschieben. Klicken Sie auf Rückgängig, um die letzte zu entfernen, oder klicken Sie auf eine Annotation und drücken Sie Löschen. Alles löschen entfernt die Schicht in einem Schritt.
5
Exportiere das annotierte Foto
Wähle PNG (verlustfrei, empfohlen für Screenshots), JPG (kleiner, Fotos) oder WebP (beste Größe-zu-Qualität), und klicke dann auf Download. Die Annotationen werden in den Export in voller Quellauflösung eingebettet.

Wie browserseitige Annotation funktioniert

1. Dekodiere das Quellbild mit createImageBitmap() — nativ, keine Bibliothek.
2. Rendere das Foto auf ein Bildschirm-Canvas in Vorschaugröße (≤ 900 px auf der längeren Seite).
3. Jede Annotation wird als typisiertes Objekt gespeichert (Art, Koordinaten, Farbe, Strich).
4. Beim Exportiere zuerst das Bild in Originalauflösung auf ein frisches Canvas zeichnen.
5. Spiele jede Annotation darüber mit ctx.drawImage / strokeRect / usw. ab.
6. Kodieren mit canvas.toBlob(format, quality) und als Download anbieten.

Die Speicherung von Annotationen als Objekte anstelle von direkter Einbettung in die Pixel hat zwei echte Vorteile. Erstens bleibt das Originalfoto intakt — Rückgängig machen, Löschen und Neuplatzieren sind alles nur Zustandsänderungen, kein destruktives 'Löschen'-Werkzeug erforderlich. Zweitens verwendet der Export die volle Quellauflösung: die Bildschirmvorschau kann auf 900 Pixel skaliert werden, aber wenn du auf Download klickst, rasterisiert das Tool alles gegen das Bild in Originalgröße neu. Koordinaten werden im Bildraum gespeichert und bei der Darstellung skaliert, sodass ein 4032×3024 Screenshot eines Handys einen 4032×3024 annotierten Export mit scharfen Pfeilspitzen und Text produziert.

Referenz: MDN — CanvasRenderingContext2D

Häufige Annotationen

Foto	Beste Werkzeuge zur Verwendung
App-Screenshot für einen Fehlerbericht	Rotes Rechteck um die defekte Benutzeroberfläche + roter Pfeil mit einem 'Dieser Button ist nicht ausgerichtet'-Textlabel. Halte dich an eine Akzentfarbe, damit die Markierung als eine einzige Nachricht gelesen wird.
Rezeptfoto mit Schritt-für-Schritt-Labels	Gelbe Pfeile nummeriert 1, 2, 3, die auf Zutaten zeigen + kleine Textlabels für jede. Kleinere Textgröße (16–24 px) hält das Foto darunter lesbar.
Whiteboard-Foto aus einem Meeting	Freihandkreise um wichtige Kästchen + Textannotationen für fehlenden Kontext. Verwende eine hochkontrastierende Farbe (rot oder pink), damit sie auf überfüllten Whiteboards sichtbar ist.
Immobilienanzeigenfoto	Rechtecke zur Hervorhebung von Merkmalen (Edelstahlgeräte, Hartholz usw.), kurze Textlabels. Schwarz mit einem subtilen Umriss liest sich gut auf den meisten Innenaufnahmen.

Wann man einen Fotoannotator verwenden sollte

Fehlerberichte mit roten Kästchen und Pfeilen, die genau auf das defekte Element zeigen.
Design-Feedback für Stakeholder, die sich nicht in Figma einloggen möchten, um einen Kommentar zu hinterlassen.
Schritt-für-Schritt-Anleitungen auf einem einzigen Foto (Rezepte, Reparaturanleitungen, Software-Durchgänge).
Immobilien- oder Produktanzeigen, bei denen du spezifische Merkmale im Foto hervorheben möchtest.
Markierung von Arbeitsblättern im Klassenzimmer — kreise die richtige Antwort ein, ziehe einen Pfeil, füge einen Haftnotiz hinzu.
Schnelle Beschriftungen auf einem Screenshot, bevor du ihn in Slack, Discord oder eine E-Mail einfügst.
Whiteboard- oder Notizbuchfotos, die Callouts benötigen, um als eigenständige Bilder lesbar zu sein.

Häufig gestellte Fragen

Sind Annotationen in das Foto eingebettet oder sind sie eine separate Ebene?

Auf dem Bildschirm leben sie als bearbeitbare Objekte, sodass Rückgängig machen, Löschen und Ziehen zum Neuplatzieren funktionieren. Wenn du auf Download klickst, rasterisiert das Tool sie auf eine Kopie des Quellbildes — die exportierte Datei ist ein flaches Foto, in das die Markierung dauerhaft integriert ist.

Werden meine Exporte eine niedrigere Auflösung als das Original haben?

Nein. Die Bildschirmvorschau wird verkleinert, um zu passen (maximal 900 px auf der längeren Seite), aber der Export verwendet die Originalbildabmessungen. Annotationen werden in Bildraumkoordinaten gespeichert und in voller Größe neu gerendert, sodass ein 4000 Pixel breiter Screenshot einen 4000 Pixel breiten annotierten PNG produziert.

Warum hat der Text einen schwarzen Umriss, den ich nicht angefordert habe?

Einfacher Text kann auf hellen oder dunklen Hintergründen verschwinden. Der dünne schwarze Umriss hält jedes Label auf einem weißen Whiteboard, einem dunklen Screenshot oder einem überfüllten Foto lesbar. Wenn du ihn nicht sichtbar haben möchtest, wähle eine schwarze Textfarbe und der Umriss wird sich anpassen.

Kann ich ein Label bearbeiten, nachdem ich es platziert habe?

Du kannst es verschieben, indem du zu Auswählen wechselst und es ziehst, oder es löschen und ein neues mit dem korrigierten Text platzieren. Es gibt noch keine In-Place-Textbearbeitung — die meisten Benutzer finden es schneller, zu löschen und neu zu tippen, als eine fokussierte Texteingabe zu verwalten.

Hat Freihand eine Glättung?

Es erfasst jede Zeigebewegung und verbindet sie mit abgerundeten Linienübergängen, sodass eine ruhige Hand ruhige Linien gibt. Es gibt keine Bezier-Glättung — das ist eine bewusste Wahl, da Glättung dazu neigt, die genauen Gesten, die du wolltest (eine scharfe Pfeilspitze, eine gezackte Unterstreichung), abzurunden. Verwende das Pfeilwerkzeug, wenn du saubere Geometrie möchtest.

Werden meine Fotos irgendwo hochgeladen?

Nein. Das Bild wird vollständig in deinem Browser dekodiert, gerendert, annotiert und exportiert. Es gibt keinen Server-Round-Trip. Du kannst im Netzwerk-Tab deines Browsers überprüfen, dass nach dem ersten Laden der Seite nichts gesendet wird.

Was ist der Unterschied zwischen diesem und dem Fotoeditor?

Der Fotoeditor passt das Foto selbst an — Helligkeit, Kontrast, Farbe, zuschneiden, drehen. Der Fotoannotator lässt das Foto in Ruhe und fügt eine Markierungsebene oben drauf hinzu. Verwenden Sie den Editor, wenn Sie das Foto reparieren möchten, den Annotator, wenn Sie auf etwas im Foto hinweisen möchten.

Zuletzt aktualisiert 2026-04-28

Was ist ein Fotoannotator?

Wie man ein Foto annotiert

Foto oder Screenshot ablegen

Ziehen Sie eine JPG-, PNG- oder WebP-Datei in den Upload-Bereich oder klicken Sie, um von Ihrem Gerät auszuwählen. Screenshots, Handyfotos, Produktbilder — alles, was Browser rendern können, funktioniert.

Wählen Sie ein Werkzeug und eine Farbe

Verwenden Sie Pfeil, um auf etwas zu zeigen, Rechteck, um es einzurahmen, Freihand, um zu umkreisen oder zu kritzeln, und Text, um eine Beschriftung hinzuzufügen. Wählen Sie eine Farbe aus der Palette oder öffnen Sie den Farbwähler für jeden Hex-Wert.

Klicken und ziehen Sie auf das Bild

Ziehen Sie, um Pfeile und Rechtecke zu zeichnen. Ziehen Sie mit Freihand, um zu kritzeln. Mit dem Textwerkzeug geben Sie zuerst Ihre Beschriftung ein und klicken dann auf das Foto, um sie dort abzulegen, wo Sie möchten.

Positionieren oder rückgängig machen

Wechseln Sie zu Auswählen und ziehen Sie dann eine Annotation, um sie zu verschieben. Klicken Sie auf Rückgängig, um die letzte zu entfernen, oder klicken Sie auf eine Annotation und drücken Sie Löschen. Alles löschen entfernt die Schicht in einem Schritt.

Exportiere das annotierte Foto

Wähle PNG (verlustfrei, empfohlen für Screenshots), JPG (kleiner, Fotos) oder WebP (beste Größe-zu-Qualität), und klicke dann auf Download. Die Annotationen werden in den Export in voller Quellauflösung eingebettet.

Wie browserseitige Annotation funktioniert

1. Dekodiere das Quellbild mit createImageBitmap() — nativ, keine Bibliothek.
2. Rendere das Foto auf ein Bildschirm-Canvas in Vorschaugröße (≤ 900 px auf der längeren Seite).
3. Jede Annotation wird als typisiertes Objekt gespeichert (Art, Koordinaten, Farbe, Strich).
4. Beim Exportiere zuerst das Bild in Originalauflösung auf ein frisches Canvas zeichnen.
5. Spiele jede Annotation darüber mit ctx.drawImage / strokeRect / usw. ab.
6. Kodieren mit canvas.toBlob(format, quality) und als Download anbieten.

Häufige Annotationen

Foto	Beste Werkzeuge zur Verwendung
App-Screenshot für einen Fehlerbericht	Rotes Rechteck um die defekte Benutzeroberfläche + roter Pfeil mit einem 'Dieser Button ist nicht ausgerichtet'-Textlabel. Halte dich an eine Akzentfarbe, damit die Markierung als eine einzige Nachricht gelesen wird.
Rezeptfoto mit Schritt-für-Schritt-Labels	Gelbe Pfeile nummeriert 1, 2, 3, die auf Zutaten zeigen + kleine Textlabels für jede. Kleinere Textgröße (16–24 px) hält das Foto darunter lesbar.
Whiteboard-Foto aus einem Meeting	Freihandkreise um wichtige Kästchen + Textannotationen für fehlenden Kontext. Verwende eine hochkontrastierende Farbe (rot oder pink), damit sie auf überfüllten Whiteboards sichtbar ist.
Immobilienanzeigenfoto	Rechtecke zur Hervorhebung von Merkmalen (Edelstahlgeräte, Hartholz usw.), kurze Textlabels. Schwarz mit einem subtilen Umriss liest sich gut auf den meisten Innenaufnahmen.

Wann man einen Fotoannotator verwenden sollte

Fehlerberichte mit roten Kästchen und Pfeilen, die genau auf das defekte Element zeigen.

Design-Feedback für Stakeholder, die sich nicht in Figma einloggen möchten, um einen Kommentar zu hinterlassen.

Schritt-für-Schritt-Anleitungen auf einem einzigen Foto (Rezepte, Reparaturanleitungen, Software-Durchgänge).

Immobilien- oder Produktanzeigen, bei denen du spezifische Merkmale im Foto hervorheben möchtest.

Markierung von Arbeitsblättern im Klassenzimmer — kreise die richtige Antwort ein, ziehe einen Pfeil, füge einen Haftnotiz hinzu.

Schnelle Beschriftungen auf einem Screenshot, bevor du ihn in Slack, Discord oder eine E-Mail einfügst.

Whiteboard- oder Notizbuchfotos, die Callouts benötigen, um als eigenständige Bilder lesbar zu sein.

Häufig gestellte Fragen

Sind Annotationen in das Foto eingebettet oder sind sie eine separate Ebene?

Werden meine Exporte eine niedrigere Auflösung als das Original haben?

Warum hat der Text einen schwarzen Umriss, den ich nicht angefordert habe?

Kann ich ein Label bearbeiten, nachdem ich es platziert habe?

Hat Freihand eine Glättung?

Werden meine Fotos irgendwo hochgeladen?

Was ist der Unterschied zwischen diesem und dem Fotoeditor?

Fotoannotator

Was ist ein Fotoannotator?

Wie man ein Foto annotiert

Wie browserseitige Annotation funktioniert

Häufige Annotationen

Wann man einen Fotoannotator verwenden sollte

Verwandte Werkzeuge

Häufig gestellte Fragen

Fotoannotator

Was ist ein Fotoannotator?

Wie man ein Foto annotiert

Wie browserseitige Annotation funktioniert

Häufige Annotationen

Wann man einen Fotoannotator verwenden sollte

Verwandte Werkzeuge

Häufig gestellte Fragen