Javascript Experiment
Dynamische Inline-Grafiken mit Data URLs
Beim Rumstöbern im Internet bin ich auf die interessante Möglichkeit gestossen, Grafiken mit Hilfe einer Data-URL direkt in HTML einzubetten. Leider unterstützen nicht alle Browser das Data-URL Schema: Benutzer des InternetExplorers können die folgenden Beispiele erst ab Version 8 sehen.
Um was geht's?
Der folgende Code erzeugt in HTML das Bild dieser einfachen horizontalen Linie
<img src="data:image/gif;base64, R0lGODlhZAABAIAAAJmZqgAAACH5BAAAAAAALAAAAABkAAEAAAIIhI+py+0PYysAOw==" />
Oder etwas komplizierter: Das Portrait von Larry aus dem Dokument der Network Working Group.
<img src="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" />
Projekt
Über eine solche Data-URL sollte es doch möglich sein, Bilder dynamisch mit Javascript zu erstellen! Bis es soweit ist, stehen allerdings zwei Hindernisse im Weg.
- Grafikformat
Die üblichen Formate jpg, png und gif können verwendet werden. Leider ist die Kodierung aller drei Formate nicht trivial und ungeeignet für Javascript. Als «einfachste» Variante ging ich schliesslich daran, eine gif-Komprimierung nach zu bauen. Dabei habe ich mich rasch auf die simpelste gif-Art mit nur zwei Farben beschränkt, alles andere wäre schlagartig noch komplizierter geworden. - base64-Kodierung
Das fertige Bild muss als base64 verschlüsselt werden. Kurzentschlossen wurde eine solche Methode anhand einer Beschreibung programmiert. Das war voreilig, denn im Nachhinein habe ich festgestellt, dass es etliche fertige Skripts gibt. Immerhin, meine Variante funktioniert auch.
Ergebnisse
Diese vorerst normal referenzierten Bilder werden beim Anklicken durch dynamische, mit Javascript generierte gifs mit Zufallskomponente ersetzt. Die beiden Bilder links sind skaliert, rechts werden sie in Originalgrösse (100 x 32 Pixel) dargestellt.
<img src="diagonal.gif" onclick="this.src=bild1(100,32)" alt="Testbild" />
Fazit
Die Methode funktioniert grundsätzlich. Leider hat sie gravierende Nachteile:
- funktioniert erst mit der aktuellen Version 8 des InternetExplorers
- zu aufwändig und langsam für ernsthafte Projekte
- die Grösse einer URL ist beschränkt, das gif darf eine Grösse von ca. 4 kB nicht überschreiten. Viel grösser als die Demobilder oben geht nicht.
Offensichtlich können data-URLs zur Zeit nur für Spielereien eingesetzt werden, weshalb ich die Idee nicht weiter verfolgen werde.
