Image Editor

Image Editor (Version 1.0.1)

Webbasierte Grafik-Anwendung für einfache Bildbearbeitung und Erstellung grafischer Elemente direkt im Browser.

Hauptfunktionen

• Bildverarbeitung:
  Einfügen/Zuschneiden von Bildern z. B. aus der Zwischenablage mit automatischem Beschnitt und Skalierung (max. 1280px Breite)
• Rechteckgenerator:
  Erstellen individueller Rechtecke mit Eckenradius, Rahmenstärke, Farben und äußerem Weißrand (Einheiten: px/mm)
• Rahmen-System:
  Hinzufügen konfigurierbarer Innenrahmen (farbig) und Außenränder (weiß) mit automatischem Clipping
• Scalierung:
  Scalieren das Bildes vor dem Export
• Export:
  PNG-Generierung mit Vorschau, Download-Link und direktem Kopieren in die Zwischenablage
• ChatGPT-Integration:
  Automatische Prompt-Generierung für SVG-Erstellung via KI

Technische Details

• Clientseitige Ausführung (HTML5 Canvas API, JavaScript)
• Modernes UI mit dynamischen Formularfeldern und Raster-Layout
• Unterstützt Clipboard-API für Bildimport/Export
• Kompatibel mit allen modernen Browsern

Ideal für schnelle Bildoptimierungen, Screenshot-Bearbeitung und Erstellung standardisierter Grafikelemente ohne externe Software.

Hintergrund der Entwicklung

Der Auslöser für die Entwicklung dieser Anwendung war ein häufig auftretendes Problem beim Erstellen von Screenshots: Artefakte von darunterliegenden Fenstern, wie Schriftreste, Rahmen oder Fensterschatten, wurden ungewollt mit aufgenommen. Besonders in den Ecken der Screenshots waren diese Störungen deutlich sichtbar.

Um diese Artefakte zu beseitigen, habe ich verschiedene Techniken ausprobiert. Eine Methode war die Verwendung von vier Stempeln, die über die Ecken gelegt wurden, um die fehlerhaften Bereiche zu verdecken. Dies war jedoch sehr zeitintensiv, da die genaue Positionierung der Stempel schwierig war, wie die Vergrößerung im linken Bild zeigt.

Im Laufe der Zeit habe ich weitere Ansätze getestet, unter anderem die Generierung von SVG-Grafiken durch ChatGPT, um diese als Masken über die Bilder zu legen. Obwohl diese Methode in der aktuellen App-Version nicht mehr notwendig ist, habe ich sie aus Entwicklungsinteresse weiterhin integriert.

Ebenso wurde ein zweiter Ansatz umgesetzt, bei dem ausschließlich ein Rahmen in einem Canvas gezeichnet wird. Diese Funktion blieb erhalten, da sie sich beispielsweise zur Erstellung von Hintergrundgrafiken für Textboxen oder andere grafische Elemente nutzen lässt.