Manchmal entsteht ein Projekt nicht aus einer großen Vision, sondern aus purer Genervtheit. Ich wollte eigentlich nur einen zuvor gemachten Screenshot öffnen, einige sensible Wörter unkenntlich machen und das Bild dann teilen. Eine Kleinigkeit, sollte man meinen. Stattdessen fand ich im App Store überladene Anwendungen mit Funktionen, die ich nie brauche, diverse Uralt-Apps, oder Modelle mit monatlichen In-App-Käufen für etwas so Banales wie einen Pixel-Filter. Irgendwann war der Punkt erreicht, an dem ich mir sagte: „Das versuche ich selbst zu bauen.” Nach einigen Code-Experimenten war das fertige Projekt „Puxel“ rund vier Monate später geboren. Eine kleine Web-App, deren Grundgerüst gerade einmal 43 KB umfasst. Mit allen Grafiken, dem Icon und der Engine kommt das gesamte Projekt auf lediglich 1,3 MB. Es gibt keinen App Store, keinen Download im klassischen Sinn und kein Abo. Aktuell läuft Puxel in der finalen Version 2.30 – schlank, lokal und genau auf einen Zweck fokussiert.

Auch das visuelle Erscheinungsbild habe ich selbst gestaltet – vom Interface samt Dock am unteren Rand, das bewusst an das iPad-Dock angelehnt ist, bis zu den kleinen Grafiken im Dock und dem App-Icon. Apropos App-Icon, das ist in einem cremefarbenen Minimalismus gehalten und spielt mit der Idee von Pixeln, die etwas verdecken wollen. Es gibt keinen generischen Baukasten-Look, sondern ein klares, reduziertes Design mit einer dunklen, Tahoma-ähnlichen Basis-Schrift samt Cursor-Balken und einem prägnanten Teal-Blue-Akzentton. Mir war wichtig, dass Puxel sich wie ein eigenständiges Werkzeug anfühlt und nicht wie ein zufälliges Webprojekt mit Standard-UI.

Der Puxel Workflow

Die Bedienung ist bewusst einfach gehalten. Man tippt unten im Navigations-Dock auf „ADD“ und wählt ein Bild oder Bildschirmfoto aus der „Fotos“-App des iPhones/iPads aus. Puxel analysiert das Bild direkt lokal im Browser und erkennt automatisch fast alle Wörter. Dieser Scan kann ein paar Sekunden dauern. Gedruckte Buchstaben auf farbigen Hintergründen werden dabei zu etwa 99 Prozent zuverlässig erfasst, bei handschriftlichen Texten liegt die Quote realistischerweise eher bei rund 50 Prozent. Genau hier zeigt sich, wie viel Feinarbeit in der Texterkennung steckt. Im Dock werden zwischendurch kleine Symbole angezeigt, die Tipps geben.

Nachdem das zu bearbeitende Bild per OCR-Texterkennung gescannt wurde, genügt ein Fingertipp auf ein Wort, um es zu verpixeln. Tippt man erneut darauf, wird die Änderung rückgängig gemacht. Natürlich kann man im Verpixel-Modus hoch- und runter scrollen und die Pinch-to-Zoom-Geste, also die Gestensteuerung mit Zeigefinger und Daumen, nutzen. Es ist kein umständliches Markieren, Zuschneiden oder Herumziehen von Kästen nötig. Am Ende genügt ein Tap auf „SAVE“, und das bearbeitete Bild landet wahlweise in der „Fotos“- oder in der „Dateien“-App von Apple. Mehr Workflow braucht es nicht.

Die technischen Hürden von Puxel

Der technisch spannendste Teil von Puxel war die OCR-Erkennung auf echten iPhone-Screenshots. Die klassische Texterkennung ist darauf ausgelegt, dunklen Text auf hellem Hintergrund zu lesen. In der Realität sieht es jedoch oft ganz anders aus: Es gibt beispielsweise weißen Text auf grünen Widgets, App-Namen auf buntem Wallpaper oder kleine Schrift auf Farbverläufen. Ein einzelner Durchlauf reicht hier schlicht nicht aus. Deshalb arbeitet Puxel mit fünf unterschiedlich vorverarbeiteten Bildvarianten. 

Eine erste Stufe verstärkt gezielt den Kontrast in Graustufen, eine zweite Stufe invertiert das Bild, um hellen Text auf dunklem Grund darzustellen. Zwei weitere Stufen setzen auf adaptive Binarisierung – einmal normal, einmal invertiert –, sodass Text unabhängig von der globalen Helligkeit sauber vom Hintergrund getrennt werden kann. Die fünfte und letzte Analyse betrachtet zusätzlich die Farbsättigung, um Buchstaben sichtbar zu machen, die sich farblich – und nicht nur helligkeitsbedingt – von ihrer Umgebung unterscheiden.

Anschließend werden alle Ergebnisse zusammengeführt und überlappende Erkennungen intelligent bereinigt. Das klingt nach viel Aufwand für eine kleine Web-App – und genau das war es auch. Gleichzeitig war dies der Moment, in dem aus einem Frustprojekt eine echte technische Herausforderung wurde. All das passiert vollständig lokal auf dem Gerät. Es werden keine Server, keine Cloud und keine Weitergabe von Bild- oder Textdaten an Dritte genutzt. Datenschutz ist hier keine Marketingfloskel, sondern eine direkte Folge der Architektur. Puxel ist damit DSGVO-konform, da die Daten das Gerät schlicht nicht verlassen.

Kurz und knapp gesagt …

In der finalen Version 2.30 ist Puxel am Ende genau das geworden, was ich mir ursprünglich gewünscht habe: ein Werkzeug, das eine Aufgabe sauber und unkompliziert erledigt. Ohne Funktionsballast, ohne Abo-Modell, ohne versteckte Kompromisse. 43 KB im Kern, 1,3 MB Gesamtgröße – und das gute Gefühl, ein alltägliches Problem eigenständig gelöst zu haben. Sollte jetzt jemand Interesse an dem Puxel Quellcode haben, darf er oder sie sich gerne unter den bekannten Kanälen bei mir melden.

Ich bin ein „Ein-Personen-Betrieb“, arbeite hauptberuflich im Gesundheitswesen und betreibe diese Seite als Hobbyprojekt in meiner Freizeit. Wenn Ihnen meine Arbeit gefällt (die Beiträge, die Hintergrundbilder, mein allgemeines Auftreten … einfach alles), so dürfen Sie gerne in Erwägung ziehen, mir eine kleine Spende für zum Beispiel einen Café ☕️ per PayPal.com zukommen zu lassen! Ihre Beteiligung ist unglaublich wertvoll und trägt viel zur Unterstützung und Erhalt dieser werbefreien Seite bei!

Unterstützen

André K. ist der Autor dieses Blogartikels.