Ein Projekt von DominikHLBG: Banner - Die Rettungsring-Lennebad.de-Webseite - In 3D & als Brosch├╝re/Flyer
Direkt zum Inhalt

Was ist WebPJS?

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.

 
Text, Design & Layout: Dominik Homberger - 2011 - (Barrierefrei gestaltet)

Tastaturkürzel