Mit Chafa, Aha und Konsorten zeigen Sie Bilder im Terminal an oder binden sie als pures HTML in Webseiten ein – egal, ob Fotos, QR-Codes oder Landkarten.

Dank immer ausgereifterer Technik ist das Anzeigen hochaufgelöster Bilder auf dem Bildschirm heute keine Besonderheit mehr. Das setzt typischerweise Folgendes voraus: eine Grafikkarte, die nicht nur Text darstellen kann, einen entsprechenden Monitor, eine grafische Benutzeroberfläche, eine passende Bilddatei sowie ein dazugehöriges Anzeigeprogramm. Je detailreicher aber das Bild ausfällt – also je höher die Kombination aus Bildgröße, Auflösung und Farbtiefe –, umso mehr Speicherplatz braucht die Datei. Außerdem dauert die Übertragung länger, wenn Sie die Grafik von einer entfernten Quelle beziehen, beispielsweise via Webbrowser oder als Datenstrom von einer Webcam.

Oft benötigen Sie aber gar nicht die volle Auflösung – stattdessen muss es einfach nur schnell gehen. Da spart es Zeit und Bandbreite, Bilder in reduzierter Auflösung und Farbtiefe als Text (ASCII- oder Unicode-Zeichen) direkt im Terminal anzeigen zu lassen und sie dazu mit ANSI-Farbcodes [1] umzuwandeln. Eine Variante dieser Vorgehensweise ist es, die Bilder in pures HTML und CSS umzuwandeln und das Ergebnis in einer Webseite einzubinden. Einige Textbrowser, wie zum Beispiel Elinks, zeigen diese Bilder dann direkt in der angesurften Webseite an. Der Browser Browsh [2] macht das intern ähnlich und rendert Bilder ebenfalls als Text.

Das ganze klingt nicht nur schräg, sondern ist es auch. Mit diesem Beitrag leuchten wir für Sie aus, ob und was da geht, und inwieweit das Vorgehen auch alltagstauglich ist. Inhaltlich schließen wir an einen früher veröffentlichten Beitrag [3] an, der sich mit dem Thema ASCII-Art sowie den passenden Werkzeugen dazu befasst hat.

Bilder in Text umwandeln

Wie bereits oben angerissen, gilt es, ein Bild vor dem Einbinden oder Darstellen zunächst in einzelne Zeichen umzuwandeln. Jedem Pixel – beziehungsweise meist einer ganzen Pixelgruppe – ordnet man einen passend gefärbten, einzelnen Buchstaben zu, genauer gesagt eine Glyphe.

Das geschieht über Filter in Form von Bibliotheken, beispielsweise mithilfe der Programme Aview und Asciiview der Ascii Art Library (Aalib [4]) oder von Img2txt und Cacaview aus der Colour Ascii Art Library (Libcaca [5]). Als Ergebnis erhält man eine Beschreibung des Bilds aus Buchstaben mit ANSI-Steuercodes. Die resultierende Reduktion von Auflösung und Farbtiefe sorgt nicht nur für eine geringere zu übertragende Datenmenge, sondern ermöglicht auch eine Darstellung der Bilder im Textterminal oder Textbrowser.

Das Umwandeln eines Bilds in Buchstaben gelingt zum Beispiel mit dem Programm Img2txt aus der Werkzeugsammlung der Colour Ascii Art Library. Es ersetzt das Programm Imgtoppm aus früheren Veröffentlichungen der Bibliothek. Aus dem Tux-Logo als PNG-Bild erstellen Sie mit dem folgenden Kommando ein Buchstabendatei namens tux.txt:

$ img2txt tux.png > tux.txt

Abbildung 1 zeigt einen Ausschnitt des Inhalts der Datei tux.txt. Ohne zusätzliche Schalter im Aufruf ist der Ausgabetext 60 Zeichen breit und liegt als ANSI-Code mit Farben vor (“coloured ANSI”).

Abbildung 1: Tux in Form von ANSI-Steuercodes.

Mit dem Schalter -W (Langform: --width) regulieren Sie die Breite der Ausgabe. Falls Sie mittels -H (Langform --height) keine Angabe vornehmen, skaliert Img2txt die Höhe der Ausgabe entsprechend des Originalverhältnisses aus Höhe und Breite. Mit dem Schalter -f (Langform: --format) bestimmen Sie das Ausgabeformat. Die Tabelle “Img2txt: Ausgabevarianten” fasst die möglichen Ausgabevarianten zusammen.

Möchten Sie ANSI-Bilder wieder als normales Bild abspeichern, hilft Ihnen die Ansilove-Bibliothek [6] weiter. Durch Interpretieren der ANSI-Codes macht sie sozusagen Screenshots im PNG-Format, ohne dazu einen echten Screenshot eines Textterminals erzeugen zu müssen.

Umgewandelte Bilder anzeigen

Bereits seit Längerem experimentieren die beiden Autoren dieses Beitrags mit den Werkzeugen zur Darstellung der umgewandelten Bilder. Axel Beckert packte im Frühjahr 2020 noch Chafa [7] und Aha [8] in die Werkzeugkiste [9], ebenso das Helferchen Catimg [10]. Sicherlich in Anlehnung an Cat/Tac benannt, impliziert es zudem die Anzeige von Katzenbildern – aber es kann deutlich mehr. Bei der Recherche tauchte zudem noch Jp2a [11] auf, das ähnlich agiert wie Img2txt.

Bei Chafa und Catimg handelt es sich um Bildbetrachter für das Terminal. Beide sind erst seit Debian GNU/Linux 10 fester Bestandteil einer stabilen Veröffentlichung der Linux-Distribution. Chafa zeigt ein oder mehrere Bilder als Diashow vollständig im Terminal an (Abbildung 2). Es skaliert ein Bild entsprechend der aktuellen Breite und Höhe des Terminalfensters. Catimg orientiert sich dagegen nur an der Breite des Bilds, sodass beim Blättern der obere Rand des Bilds gegebenenfalls bereits wieder aus dem angezeigten Bereich des Terminals scrollt. Die folgenden beiden Aufrufe zeigen das für ein einzelnes Bild sowie für eine Diashow aus allen PNG-Dateien im aktuellen Verzeichnis:

$ chafa linux.png
$ chafa *.png

Abbildung 2: Tux als Zeichengrafik mit Chafa.

Chafa bringt eine Reihe interessanter Schalter für Effekte mit. So legen Sie mit -c (--colors) den Farbmodus fest, beispielsweise mit 2, 16 oder 256 Farben oder in 24-Bit-Darstellung. Wie lange in der Diashow ein Bild stehenbleibt, legt -d (--duration) fest – in der Vorgabe sind es drei Sekunden. Die Größe der Ausgabe definiert -s (--size) BreitexHöhe. Als Vorgabe verwendet Chafa die Größe des Terminals und verwendet 80 x 25 Zeichen, wenn es diese nicht ermitteln kann. Der Schalter --watch gib das Bild bei jeder Änderung neu aus. Catimg kennt noch den Schalter -l, über den Sie steuern, wie oft es ein animiertes GIF abspielt.

Weder Chafa noch Catimg beherrschen Überblendeffekte, um die Diashows interessanter zu gestalten. Vielleicht nehmen die Entwickler ja diesen Beitrag zum Anlass, ein solches Feature noch einzubauen.

Unterschiede

Bei allen Ähnlichkeiten weisen die vorgestellten Werkzeuge doch deutliche Eigenheiten auf. So kann Aview nur mit Bildern im PNM-Format umgehen und zeigt Bilder nur in Graustufen – die Aalib unterstützt keine Farben. Asciiview ist ein Wrapper um Aview, der Bilder vorher mit externen Tools in das von Aview benötigte PNM-Format konvertiert. Animierte GIFs funktionieren nicht.

Sofern Sie im Aufruf nichts anderes angeben, konvertiert Img2txt die Bilder nach ASCII, nicht als Unicode-Glyphen, und verwendet lediglich 16 Farben. Außerdem blinken manche Zeichen je nach Terminal. Cacaview macht im Prinzip dasselbe wie Img2txt, ist aber ein expliziter Bildbetrachter und öffnet ein separates Fenster, um die bestmöglichen Terminaleinstellungen zu verwenden. Entsprechend blinkt hier auch nichts mehr. Animierte GIFs funktionieren allerdings auch hier nicht.

Chafa und Catimg zeigen PNGs, JPEGs, GIFs und viele andere Bildformate auch in mehr als 16 Farben an, und – sofern das Terminal es unterstützt – auch mit Unicode-Glyphen. Beide kommen auch mit animierten GIFs zurecht. Bei deren Anzeige beenden sich beide Programme nicht von selbst, sondern zeigen das Bild in einer Endlosschleife an.

Catimg nutzt stets die ganze Terminalbreite zur Anzeige. Gegebenenfalls legen Sie mit dem Schalter -w legt die Breite der Ausgabe fest. Abbildung 3 zeigt das für eine Breite von 100 Pixel.

Abbildung 3: Linus als Zeichengrafik mit Catimg.

In der Webseite

Jeder, der schon einmal HTML von Hand geklöppelt oder die Inhalte einer Webseite auseinandergenommen hat, ist über das HTML-Tag <img> gestolpert. Der Code in Listing 1 referenziert die Grafikdatei tux.png und bindet sie zur Darstellung an der aktuellen Position auf einer Webseite ein.

<img src="tux.png" alt="Tux, der Linux-Pinguin">

Das Attribut alt (“alternative”) gibt den Alternativtext zum Bild an, den der Webbrowser genau dann auf der Webseite anzeigt, wenn er das Bild nicht laden kann oder soll. Betrachten Sie die Webseite mit einem Screenreader wie beispielsweise Orca [12], liest der den hinterlegten Text vor (siehe auch Kasten “Barrierefrei”).

Bilder als pures HTML einbinden

Sowohl der ANSI-HTML-Adapter Aha als auch Img2txt und Jp2a (durch Angabe entsprechender Optionen) wandeln Texte mit ANSI-Farbcodes beziehungsweise Bilder in textbasierte HTML-Sequenzen und HTML-Tags zum Setzen der Farbe um. Diese Ausgabe kopieren Sie dann direkt in Ihre HTML-Datei.

Sicherlich fragen Sie sich jetzt, wofür das denn gut sein soll. Damit binden Sie beispielsweise Terminal-Inhalte als Screenshots in eine Webseite ein, ohne dafür ein Bild benutzen zu müssen. Das spart an dieser Stelle auf jeden Fall Daten, weil es sich ja mehr oder weniger um das Originalformat handelt, nämlich Text.

In Abbildung 4 sehen Sie einen Tux in Zeichendarstellung auf einer Webseite, Abbildung 5 zeigt ein Verzeichnis-Listing mit speziellem, rosafarbenem Hintergrund. Diese Darstellung erreichen Sie mit der Kommandokette aus Listing 2. Dazu geben Sie die Ausgabe des Kommandos ls via Pipe an Aha weiter, das sie mit einem rosa Hintergrund versieht und in die Datei ls.html ausgibt.

Abbildung 4: Tux als Klötzchengrafik im Webbrowser.

$ ls --color=always | aha --pink > ls.html

Abbildung 5: Terminalausgabe als Abbildung im Webbrowser.

Das Ergebnis kann theoretisch auch ein Screenreader lesen. Nach unseren Tests funktioniert das bislang aber lediglich mit Schwarzweißbildern zuverlässig. Vermutlich ist bei anderen Farbkombinationen der Kontrast für den Screenreader nicht groß genug.

Video und Film

Nicht nur statische Grafiken sind (an)sehenswert, sondern auch bewegte Bilder, sprich: Filmsequenzen. Die beiden bereits genannten Bibliotheken Aalib und Libcaca kommen auch hier zum Einsatz – in diesem Fall als Video-Output-Plugin für Mplayer und VLC (beide) sowie Xine (nur Aalib) und Mpv [13] (nur Libcaca). Das Hasciicam-Projekt [14] rendert Bilder von einer TV-Karte oder Kamera als ASCII-Bild.

Der Player Mpv bringt zudem noch sein eigenes Format namens TCT (True Color Text) mit. Die Dokumentation zu TCT ist allerdings recht mager, es wird lediglich in der Hilfeseite von Mpv erwähnt. Wofür die Abkürzung TCT steht, konnten die Autoren beispielsweise nur aus Quellcode-Kommentaren schließen – mehr Informationen zu dem Thema wären recht nützlich.

Die Tabelle “Videos mit Aalib und Libcaca” zeigt einige Beispielaufrufe zum Abspielen von Filmsequenzen, Abbildung 6 zeigt eine entsprechende Ausgabe von Aaxine.

Abbildung 6: Aaxine im Einsatz.

Das Ganze funktioniert recht gut, stößt aber beispielsweise beim Betrachten von Vortragsmitschnitten an seine Grenzen: Werden Folien im Film eingeblendet, lässt sich der Text darauf häufig nicht mehr lesen. Da bräuchte es dann doch auch noch OCR-Fähigkeiten statt nur Reduzierung der Auflösung und Konvertierung in ein anderes Format.

QR-Codes

Was Ihnen mit Bildern und Videos gelingt, klappt auch mit QR-Codes. Vereinfacht gesagt, handelt es sich bei QR-Codes eigentlich nur um spezielle Bilder, die sich somit auch auf der Kommandozeile anzeigen lassen. Hier kommt der Vorteil hinzu, dass man die groben “Pixel” der QR-Codes nicht noch aufwendig als Glyphe rendern müssen. Es genügt, jeden der Blöcke einfach in ein Leerzeichen oder ein halbes beziehungsweise ganzes Unicode-Blockzeichen umzuwandeln.

Damit sehen QR-Codes im Textterminal genauso gestochen scharf aus wie als richtiges Bild. Dasselbe gilt für die Darstellung in Textform in Webseiten. Hilfreiche Werkzeuge dafür sind Qrencode [15] und Qrcode [16] aus dem Debian-Paket go-qrcode. Abbildung 7 zeigt die Zeichenkette “foobar” als QR-Code in Textform.

Abbildung 7: Die Zeichenkette “foobar” als QR-Code in Textform.

Eine mögliche Anwendung dafür bietet das One-Time-Passwort-Plugin [17] des Passwortmanagers Pass [18]. Per QR-Code übergebene Geheimnisse kann er mithilfe der beiden genannten Programme auch wieder als QR-Code ausgeben – sogar im Textterminal.

Ausblick

Zum Abschluss erlauben wir uns, Ihnen noch ein paar sehenswerte Anwendungsfälle für den Alltag mitzugeben: Asciinema [19], Mapscii [20] und Asciiquarium [21].

Mit Asciinema nehmen Sie Terminalsitzungen als Video auf. Zudem fungiert die Projektwebseite als Youtube-Ersatz und konserviert Ihre aufgenommenen Sequenzen in 8 Bit. Bei Mapscii handelt es sich um einen digitalen Atlas auf der Basis von OpenStreetMap. Er hat sogar eine Zoom-Funktion (siehe Abbildung 8 und Abbildung 9) – mit [A]+ zoomen Sie hinein, mit [Z] wieder heraus, die Pfeiltasten dienen zum Navigieren. Am unteren Bildrand sehen Sie die Koordinaten der Bildmitte, sodass Sie stets die Orientierung behalten.

Abbildung 8: Der Bodensee im Terminal (Uxterm).

Abbildung 9: Der Bodensee im Terminal (virtuelle Linux-Konsole).

Etwas mehr Bewegung auf die Konsole bringt das Asciiquarium (Abbildung 10): Diverse wasserliebende Spezies bevölkern von nun an Ihr Terminal. Das bleibt uns nur, Ihnen abschließend Petri heil zu wünschen, und einen guten Rutsch ins neue Jahr. (jlu)

Abbildung 10: Das Asciiquarium bringt diverse aquatische Spezies ins Terminal.