Cztery frameworki JavaScript w zastosowaniach graficznych. Warto się zainteresować, bo to jest Sieć przyszłości

JavaScript dawno przestał być językiem służącym głównie do stosowania na stronach WWW prostych efektów tekstowych. Dzięki dodatkowym bibliotekom możemy wykorzystać go także w celu generowania oraz przetwarzania obrazów - zarówno rastrowych, jak i wektorowych.

Wiele spośród funkcji implementowanych dotychczas po stronie serwera, z użyciem PHP oraz GD, może z powodzeniem działać za pośrednictwem przeglądarki WWW. Wystarczy skorzystać z jednego z frameworków JavaScript przeznaczonych do obróbki lub tworzenia grafik.

Artykuł ten stanowi przegląd kilku takich bibliotek. Zakres ich zastosowań jest bardzo szeroki - od generowania grafiki wektorowej, poprzez wizualizację danych liczbowych, aż po przetwarzanie map oraz informacji geolokalizacyjnych.

Wykorzystamy następujące biblioteki:

Pixastic (grafika rastrowa),
Raphaël (grafika wektorowa),
Protovis i d3.js (wizualizacja danych),
OpenLayers (mapy).

Nie są to jedyne narzędzia służące do obróbki obrazu z użyciem JavaScript. Poza tym istnieją też inne zastosowania związane z grafiką, realizowane za pomocą skryptów JavaScript - na przykład tworzenie efektownych interfejsów aplikacji internetowych. Jedną z bibliotek opracowanych z myślą o takich zadaniach jest Qooxdoo.

Także najbardziej rozbudowane i uniwersalne frameworki JavaScript posiadają z reguły osobną pulę funkcji odpowiedzialnych za przetwarzanie grafiki. Przykładowo, Dojo Toolkit oferuje API dojox.gfx, sprawdzające się znakomicie zwłaszcza w trakcie pisania skryptów tworzących grafiki i animacje wektorowe.

Bez dalszych wstępów zapraszamy do naszego przeglądu.

Pixastic

Biblioteka pozwalająca na przetwarzanie grafiki rastrowej bezpośrednio w przeglądarce WWW po stronie klienta. Dzięki niej możliwe jest stosowanie z poziomu JavaScript następujących filtrów oraz efektów:

rozmywanie,
zmiana nasycenia,
konwersja do odcieni szarości,
zmiana kontrastu oraz nasycenia,
obracanie obrazu,
inwersja barw,
wytłaczanie oraz wiele innych.

Zestaw funkcji jest zachęcający. Niestety, dobre wrażenie psują problemy z przenośnością skryptów tworzonych z użyciem Pixastic. Biblioteka korzysta z elementu Canvas, co oznacza, że internauta odwiedzający stronę musi posiadać przeglądarkę obsługującą HTML 5.

W ten sposób zawęża się grono potencjalnych użytkowników aplikacji tworzonej za pomocą Pixastic. Skrypty działają poprawnie w nowych wersjach Firefoksa, Opery, a także Safari.

Na stronach Pixastic znaleźć można sieciowy edytor grafiki pozwalający na przetestowanie funkcji biblioteki.

Na korzyść biblioteki przemawia prosty sposób korzystania z niej. Konieczne jest wskazanie w kodzie strony pliku pixastic.core.js, a także skryptów odpowiedzialnych za poszczególne narzędzia przetwarzające grafikę (przykładowo <script type="text/javascript" src="actions/brightness.js"></script>), a następnie dopisanie wywołań odpowiednich funkcji. Najprostsze rozwiązanie polega na odpowiednim uzupełnieniu elementu <img>, na przykład w następujący sposób:

<img src="plik.jpg" class="pixastic pixastic-blurfast(amount=0.5)"/>

«poprzednia 1 2 3 4 ... 6 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

5 skomentuj »

Komentarze

#1 mci 2011-07-11 13:16:26 0
Processing.js? http://www.google.pl/search?sourceid=chrome&ie=UTF-8&q=processing.js
IP: 77.255.123.[...] Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/534.16 (KHTML, like Gecko) Chrome/10.0.648.127 Safari/534.16
#2 Jacek Smolak^® 2011-07-11 15:56:02 0
To ja mam takie pytanko: w Google CDN nie ma np Processing.js. Czy można w takim razie zgłosić/gdzieś umieścić daną bibliotekę, żeby nie trzeba było takiego kolosa hostować u siebie? Są takie serwisy?
IP: 81.161.201.[...] Mozilla/5.0 (Windows NT 6.0; rv:5.0) Gecko/20100101 Firefox/5.0
#3 trojan 2011-07-11 17:33:43 0
Wiele bibliotek JavaScript (w tym processing.js) jest na http://www.cdnjs.com/
IP: 89.68.13.[...] Mozilla/5.0 (X11; Linux x86_64; rv:5.0) Gecko/20100101 Firefox/5.0
#4 pawelw 2011-07-12 20:08:37 0
O processing.js było też w jednym z wcześniejszych artykułów: http://webhosting.pl/HTML.5.w.praktyce.Pokazujemy.przyklady.zastosowan.nowych.elementow?page=3
IP: 109.173.133.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.8) Gecko/2009033100 Ubuntu/9.04 (jaunty) Firefox/3.0.8
#5 Daresh 2011-07-15 22:21:10 0
Znacie może jakąś bibliotekę, w której mógłbym przetwarzać obraz piksel po pikselu?
IP: 217.144.201.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.