Bilder Annotieren

Oft müssen Screenshots oder Bilder annotiert werden. Ansich praktisch, bis sich das Bild ändert, die Anmerkungen aber eigentlich gleich bleiben (z.B. wenn das neue Excel eine leicht andere Benutzeroberfläche hat).

TDev bringt in der Entwicklungsumgebung eine einfache Möglichkeit mit, Bilder zu annotieren, wobei die Originalbilder erhalten und die Anmerkungen weiterhin editierbar bleiben.

Technischer Hintergrund

Mit der 👉 File System Access API können lokale Dateien und Ordner im Browser geöffnet und bearbeitet werden.

Sobald ein Bild editiert wird, wird eine gleichnamige 👉 Excalidraw-Datei erstellt und das Bild als Hintergrund gesetzt. Beim speichern wird das Bild inkl. der Anmerkungen exportiert und gespeichert. Das Originalbild ist fortan als Bildquelle in Excalidraw hinerlegt und kann jederzeit wiederhergestellt werden.

Exportkonfiguration

Beim Exportieren wird das Bild in der Regel im Original-Format gespeichert. Folgende Konfigurationen werden angewandt:

• Export mit 92 DPI
• Bildbreite: wie das Original, aber nicht breiter als 3840px.
• Bildqualität von 0.8 (für .jpeg und .webp Bilder).

Beispiel

Effizienteres webp-Exportformat

Die Bilder lassen sich auch als webp exportieren:

Startmenü Windows

Webp-Export

Wird ein Bild als WebP exportiert, müssen die Quellen im Markdown manuell angepasst werden.

Reine Excalidraw Bilder

Es können auch reine Excalidraw Bilder erstellt werden, die keine Hintergrundbilder enthalten (und bei welchen entsprechend auch das Hintergrundbild nicht ersetzt werden kann).

Um ein solches Bild neu zu erstellen:

1. Leeres excalidraw file erstellen, bspw. ./images/demo.svg.excalidraw mit dem Inhalt {} (muss ein valides JSON sein)
2. Leeres SVG-Bild erstellen, bspw. ./images/demo.svg
3. SVG-Bild im Markdown referenzieren:

   ![](./images/demo.svg)

Zu beachten

Sobald das SVG-Bild bearbeitet wird, wird die entsprechende demo.svg.excalidraw Datei eingelesen um die Szene aufzubauen. Beim Export wird demo.svg in jedem Fall überschrieben - es lohn sich also nicht, hier ein hübsches SVG-Bild zu suchen.

Technischer Hintergrund

Ob ein Hintergrundbild vorhanden ist oder nicht, wird vom Vorhandensein einer Element- & File-ID TDEV-BACKGROUND-IMAGE bzw. TDEV-BACKGROUND--FILE abgeleitet. Ist keine ID vorhanden, wird stets die Bild-Erweiterung (.png, .jpg, .svg, .webp) für das Export-Format verwendet.

Empfohlenes Export-Format für reine Excalidraw Bilder

Das empfohlene Export-Format für reine Excalidraw Bilder ist SVG. Dieses Format ermöglicht eine verlustfreie Skalierung und Bearbeitung der Bilder.

Eine Ausnahme bilden Excalidraw Szenen mit vielen eingefügten Bildern.