AnTo – Bilder beschriften, direkt im Browser

AnTo (ANnotation TOol) markiert und beschriftet Fotos, Screenshots, Pläne und Skizzen. Es braucht kein Bildbearbeitungsprogramm und keine Anmeldung, und alles bleibt auf dem eigenen Gerät.

Version 1.3.0 · eine HTML-Datei, keine Abhängigkeiten · © Ralf Burger

Zeichnen

Pfeil, Linie, Kreis, Rechteck, Ellipse, Polygon, Freihand, Text, Eimer, Sprühdose und Verpixeln.

Nachbearbeiten

Jedes Objekt bleibt einzeln auswähl-, verschieb- und änderbar.

Speichern

Als JPEG zum Weitergeben oder als Projektdatei zum Weiterarbeiten.

Überall

Maus und Touch, kompakte Ansicht für Tablet und Smartphone, heller und dunkler Modus.

Typische Einsätze: Schäden oder Mängel markieren, Anleitungen bebildern, Fehler in Screenshots zeigen, Maße und Hinweise in Grundrisse eintragen.

Funktionen

Die Werkzeuge sind oben in vier Menüs sortiert. Auf schmalen Bildschirmen ist die Werkzeugleiste zunächst eingeklappt; der Button „Werkzeuge“ im Kopf klappt sie auf.

Formen

Werkzeug	Bedienung
Pfeil, Linie	Startpunkt klicken und zum Endpunkt ziehen.
Kreis	Mittelpunkt klicken und den Radius aufziehen.
Rechteck, Ellipse	Eine Ecke klicken und zur gegenüberliegenden ziehen.
Freihand	Mit gedrückter Maustaste oder dem Finger zeichnen.
Polygon	Punkte nacheinander setzen; mit „Fertig“, Doppelklick oder Klick nahe dem Startpunkt abschließen. Esc bricht ab.
Text	An die gewünschte Stelle klicken und tippen; Größe und Drehung im Menü „Stil“.
Eimer	Füllt den kleinsten von durchgehenden Linien umschlossenen Bereich um den Klickpunkt. Die Toleranz bestimmt, wie ähnliche Randfarben als gleich gelten.
Sprühen	Wie eine Sprühdose: gedrückt halten und ziehen. Bleibt man an einer Stelle, wird die Farbe dort dichter. Sprühradius und Dichte im Menü „Stil“.
Verpixeln	Rechteck aufziehen: alles darunter wird in grobe Blöcke zerlegt, etwa Gesichter, Kennzeichen oder Namen. Die Pixelgröße im Menü „Stil“ bestimmt, wie unkenntlich es wird.

Bearbeiten

Funktion	Wirkung
Element auswählen	Objekt anklicken und verschieben. Blaue Griffpunkte ändern Form, Winkel oder Radius. Doppelklick auf Text öffnet die Textbearbeitung.
Alle verschieben	Verschiebt alle Objekte gemeinsam, ohne ihre Lage zueinander zu ändern.
Maßstab	Skaliert nur die Objekte, etwa um Markierungen auf ein anders aufgelöstes Bild zu übertragen.
Bildgröße	Skaliert das Bild selbst um einen Prozentsatz; die Objekte werden mitskaliert.
Rückgängig, Löschen	Letzten Schritt zurücknehmen, ausgewähltes Objekt oder alles löschen.

Stil

Farbe, Strichstärke und Linienstil (durchgezogen, gestrichelt, Strich-Punkt) gelten für neue Objekte und für das gerade ausgewählte. Kreis, Rechteck, Ellipse, Polygon und Freihand lassen sich mit Füllfarbe und Deckkraft füllen. Schriftgröße und Drehung des Texts sind auch nachträglich und numerisch einstellbar. Sprühradius, Dichte und Pixelgröße gelten für Sprühdose und Verpixeln, auch für ein bereits markiertes Objekt.

Laden und Speichern

Bild laden ersetzt das Hintergrundbild (JPEG oder PNG); vorhandene Objekte werden dabei entfernt.
Vermerk einblenden setzt einen frei wählbaren Text unten rechts ins Bild, z. B. einen Bearbeitungshinweis.
Als JPEG speichern erzeugt das fertige, flache Bild (Qualität 0,92).
Projekt speichern/laden sichert alle Objekte und Einstellungen als JSON-Datei. Nach dem Laden bleiben die Objekte einzeln bearbeitbar.

Bedienung in drei Schritten

Über Laden / Speichern → Bild laden ein Foto öffnen, oder direkt auf dem leeren Blatt zeichnen.
Im Menü Formen ein Werkzeug wählen und im Bild zeichnen; unter Stil Farbe und Stärke anpassen.
Unter Laden / Speichern einen Dateinamen vergeben und als JPEG oder als Projekt speichern.

Die eingebaute Hilfe (Button „Hilfe“ im Kopf) fasst alle Funktionen zusammen; Esc schließt sie.

Datenschutz

AnTo läuft vollständig im Browser. Bilder werden nicht hochgeladen, und es wird nichts aus dem Netz nachgeladen. Gespeichert wird nur, was Sie selbst speichern: das fertige Bild oder die Projektdatei.

Aufbau der Datei

Die gesamte Anwendung steckt in anto.html (rund 2.000 Zeilen). Es gibt keinen Build-Schritt; Änderungen werden direkt in dieser Datei gemacht.

Bereich	Inhalt
`<style>`	Farbschema mit hellem und dunklem Modus (automatisch oder über `[data-theme]` erzwungen), Startbildschirm `#intro`, kompakte Ansicht für Touch-Geräte und schmale Bildschirme.
Metadaten	Title, Description, Canonical, Open Graph, JSON-LD `WebApplication`.
`<header>`	Titel mit Versionsanzeige, Hilfe-Button, Umschalter für die Werkzeugleiste, Hauptmenü mit den Untermenüs Formen, Bearbeiten, Stil und Laden/Speichern.
`<main>`	Startbildschirm `#intro` und Zeichenfläche `#stage-wrap` mit dem Canvas `#stage`.
`#help-overlay`	Eingebaute Hilfe, gegliedert wie die Menüs.
Haupt-Skript	Die gesamte Logik, Abschnitte siehe unten.
Zweites Skript	Startbildschirm: `hideIntro()` blendet ihn bei „Loslegen“, beim Laden oder beim ersten Zeichnen aus.

Abschnitte des Haupt-Skripts

Abschnitt	Wichtige Funktionen
Grundlagen	Menüsteuerung `openMenu`, Versionsanzeige `updateVersionBadge`, DOM-Referenzen, Anwendungszustand
Zeichnen	`redraw`, `drawAnnotation`, je Typ `drawArrow`, `drawLine`, `drawCircle`, `drawRect`, `drawEllipse`, `drawFreehand`, `drawPolygon`, `drawText`; `drawWatermark`, `drawSelectionOutline`
Trefferprüfung	`hitTest`, `hitTestHandle`, Abstands- und Punkt-in-Form-Funktionen
Eimer	`floodFillMask`, `performBucketFill`
Sprühen, Verpixeln	`seededRandom`, `drawSpray`, `addSprayPoint`, `drawPixelate`
Stil	`sync` übernimmt die Werte des ausgewählten Objekts in die Regler, `apply` schreibt Regleränderungen zurück
Werkzeuge	`setMode`, `finishPolygon`, `cancelPolygon`
Transformationen	`translateAllAnnotations`, `applyGlobalScale`
Eingabe	`pointerDown`, `pointerMove`, `pointerUp` für Maus und Touch
Text	`openTextInput`, `openTextEditFor`, `commitText`
Export	JPEG-Export, Projekt speichern und laden, Bild laden

Datenmodell

Gezeichnet wird auf einem einzigen Canvas. Jedes Objekt ist ein Eintrag im Array annotations[] mit einem Feld type. Nach jeder Änderung zeichnet redraw() das Hintergrundbild und alle Objekte vollständig neu; es gibt keine Ebenen.

`type`	Beschreibung
`arrow`, `line`	Strecke von Start- zu Endpunkt, Pfeil mit Spitze
`circle`	Mittelpunkt und Radius, optional gefüllt
`rect`, `ellipse`	Zwei gegenüberliegende Ecken, optional gefüllt
`freehand`, `polygon`	Punktliste, optional gefüllt
`bucketfill`	Ergebnis einer Eimerfüllung
`spray`	Punktliste (ein Sprühstoß je Punkt), Farbe, Radius, Dichte und ein Startwert für den Zufall, damit das Sprühbild bei jedem Neuzeichnen gleich aussieht
`pixelate`	Zwei gegenüberliegende Ecken und die Blockgröße; verpixelt alles, was vor ihm gezeichnet wurde
`text`	Position, Inhalt, Schriftgröße, Drehung

Verpixeln liest beim Neuzeichnen die bereits gezeichneten Pixel. Objekte, die danach entstehen, bleiben deshalb scharf; über ein Verpixeln gezeichneter Text ist lesbar. Alle Linienobjekte tragen Farbe, Stärke und Linienstil (solid, dashed, dashdot).

Format der Projektdatei

„Projekt speichern“ schreibt eine JSON-Datei im Format Version 4. Das Hintergrundbild selbst ist nicht enthalten, nur sein Dateiname; es muss beim Weiterarbeiten erneut geladen werden.

{
  "version": 4,
  "appVersion": "1.3.0",
  "sourceImageName": "foto.jpg",
  "copyright": "Vermerktext",
  "watermarkEnabled": true,
  "canvasWidth": 1920,
  "canvasHeight": 1080,
  "annotations": [ … ]
}

Entwicklung

Zum Testen anto.html im Browser öffnen; ein Webserver ist nicht nötig.
Bei jeder Änderung APP_VERSION im Skript anheben; die Versionsanzeige im Kopf liest sie aus.
Neuer Objekttyp: Zeichenfunktion ergänzen, in drawAnnotation, hitTest und drawSelectionOutline eintragen, Werkzeug in setMode und im Menü anlegen.
Diese Dokumentation liegt im Paket unter docs/index.html.

Einzelne Teile von AnTo und diese Dokumentation sind mit Unterstützung eines KI-Assistenten entstanden und vom Autor geprüft.