Hallo Leute,
hiermit möchte ich euch WebPJS vorstellen. Es ist ein von mir entwickelte Javascript Bibliothek die in allen Webbrowser einschließlich dem Internet Explorer ab Version 6 WebP dem neuen Bildformat von Google da stellen soll. Auf folgener Seite könnt ihr es euch anschauen und das Skript downloaden: http://webpjs.appspot.com
Warum ich das ganze gemacht habe.
Mein Traum ist es immer gewesen bei Google anfangen können zu arbeiten. Also habe ich mir ein Google Projekt gesucht bei dem ich mir zutraue dran mitzuwirken und meine Ideen und Kreativität auszuüben. Da ist mir dieses WebP und WebM aufgefallen. Das war gar nicht mal so lange her. Erst im Mai 2011 bin ich so richtig drauf gestoßen. 2010 hatte ich mal paar WebM Testvideos auf YouTube geladen. So mit Sourcecode lief damals aber noch nichts. Das kam dann dieses Jahr.
Zurück zum Thema: Beim Bildformat WebP habe ich noch viel Potenzial entdeckt und ich habe schnell eine Lücke gefunden. Mein Ziel: WebP in Javascript. Ich nannte es libwebpjs, da es viel C++ Code der libwebp, entwickelt von Pascal Massimino enthält. Den C++ Code der libwebp empfand ich als sehr leicht. Obwohl ich vorher noch nichts mit C++ zu tun hatte, mir die Syntax aber durch andere Programmiersprachen nicht fremd vorkam, habe ich mich dran gesetzt und den Code umgewandelt.
Umgewandelt, klingt so nach rein in den Konverter und auf konvertieren klicken. Doch so wollte ich nicht programmieren. Ich habe mich entschlossen das alles per Hand zu machen. Step by Step, so wie der Code später aufgerufen wird. Ursprünglich wollte ich es sogar ohne Debugger machen. Doch da gab es diese Zeiger (Englisch “Pointer”) in C++ und die kannte ich zwar schon vom Namen her, aber wie die genau arbeiteten war mir dann doch zu fremd. In Javascript gibt es keinen Zeiger. Das kam dann auch noch dazu. Also habe ich die Position der Werte als separate Variabel mitgeschickt.
Wer nicht weiß was ein Zeiger ist hier eine kurze Erklärung. Öffnet Word und gebt ein Wort ein. Drückt zwei mal die Pfeil nach links Taste. Der Zeiger ist das was immer auf dem Bildschirm blinkt. Er ist immer am Ende. Außer man setzt ihn, wie ihr es gerade getan habt, um paar Positionen zurück im geschriebenen Text. Das geht natürlich auch vorwärts. Bei C++ ist dieser Zeiger direkt in der Variabel drin. So kann man einer Variabel von typ **char = String. Statt Buchstaben auch Zahlen übergeben die dann das Blink-ding zu der gewünschten Position hin springen lassen. Bei Javascript gibt es das so noch nicht. Ihr könnt euch denken wie das dann über den ganzen Quellcode abgelaufen ist. Aber es hat Spaß gemacht.
Dabei habe ich auch gelernt wie das Bildformat funktioniert. Besonders wenn ich ein Fehler rein gehauen habe war das Dilemma groß. Denn durch die Fehlersuche habe ich dann auch noch mal zu verstehen bekommen wie das alles funktioniert. Das alles fand noch im Mai statt. Erst hatte ich den Decoder in Javascript geschrieben. Da mir das aber zu langweilig war habe ich auch noch den Encoder gemacht. Nach paar Wochen war das dann alles fertig und habe es dann online gestellt um es Google zu zeigen.
Da Libwebpjs alleine nur das Decodieren übernimmt habe ich ein Kern gebastelt damit es durch ein einziges Javascript in jedem Webbrowser funktioniert. WebPJS war geboren.
Was nun WebPJS genau ist
WebPJS ist eine Javascript Bibliothek die durch einfaches einbinden einer einzigen Javascript-Datei das neue Google Bildformat “WebP” auch in Webbrowsern zur Verfügung stellt die Bilddateien mit der Endung .webp noch nicht unterstützen.
Webbrowser die WebP bereits ohne Plugin unterstützen
Google Chrome
und Opera
mit Plugin Aktivierung ist es bereits zum jetzigen Zeitpunkt möglich auch webp Bilder mit Transparenz in Google Chrome und Opera zu betrachten. Das ist Standardmäßig noch nicht im Browser integriert..
Webbrowser die WebPJS unterstützt
Hier eine kurze Auflistung der gängigen Webbrowser:
Internet Explorer 6-10
Mozilla Firefox 3.5 und höher
Apple Safari 4 & 5
Android 4
IOS 5
Seit Version 0.0.2
Android ab 2.2
iOS 4
Seit Version 0.0.2 werden auch Android Betriebsysteme ab Version 2.2 und ältere iOS Betriebsysteme unterstützt.
Der Funktionsaufbau von WebPJS
Der für Technikfreaks interessante-Teil ;)
Alle img tags
& Stylesheets
nach
WebP Bilder scannen
|
AJAX einlesen
|
libwebpjs decodieren
|
in html5 canvas zeichnen
|
toDataURL
|
WebP Dateinamen durch
Base64-Bildcode ersetzen.
|
fertig
Die IE6-8 Version funktioniert über Flash.
Hier läuft das etwas komplexer ab.
Alle img tags
& Stylesheets
nach
WebP Bilder scannen
|
flash object mit Positionkoordinaten zeichnen
position des bilder wird 1:1 nachgebaut damit das Bild bei flash auch an der richtigen stelle ist
|
flash konvertiert das Bild und zeigt es an
|
fertig
Wodurch prägt sich WebPJS?
WebPJS zeigt experimental Features wie die transparent in Bildern. Weitere folgen...
WebPJS zeigt die Bilder an der Stelle an wo sie auch hingehören.
Auch in der Flash Version wurde großen Wert darauf gelegt das die webp Bilder an der richtigen Stelle angezeigt werden einschließlich Background-images position and repeat.
Warum es momentan nur eine Minify Version gibt
Ursprünglich war dieses Projekt nur für meine Bewerbung bei Google gedacht. Die fanden es aber so Klasse das ich bei der Link-Veröffentlichung der libwebpjs zugestimmt habe. http://libwebpjs.appspot.com . WebPJS hab ich dann zum einjährigen Geburtstag von WebP selbst ins WebP Forum geschrieben aber da mir die praktischen Erfahrungen in der englischen Sprache fehlen habe ich euch den Text erspart.
Folgene Features kommen bald bei WebPJS
Das bleibt noch geheim, damit der Überraschungseffekt nicht flöten geht.
Andere coole Dinge: WebM in Javascript (ohne emscripten)
Außer WebPJS & Libwebpjs gibt es auch die Libvpx in Javascript (ganz ohne Emscripten). Ein WebM Video Decodierer der in allen Webbrowsern funktioniert. Ist aber sehr sehr langsam. Hier könnt ihr aber ein Video davon sehen. Enthält beim decodieren noch einige Fehler. Ist ein sehr nützlichen Werkzeug um VP8 (durch das Webbrowser Debugging-Tool) vom Aufbau zu verstehen.