1

Završni rad

JavaScript i Canvas : “Prije i poslije" aplikacija za prikaz fotografija

Petar Slavić

06.03.2012.

2

SadržajZadatak završnog radaKorištene tehnologijeHTML5HTML5 kompatibilnostCanvas APIPrije i poslije aplikacijaKineticJSGalerijaPrije i poslije efektUčitavanje korisničkih fotografija

06.03.2012.

3

Zadatak završnog radaNapraviti aplikaciju za prikaz prije i poslije fotografije

kao na sliciPotrebno:

Dvije slikePomični element

NedostatciNemogućnost

korištenja više slika

06.03.2012.

4

Korištene tehnologijeHTML i jQueryKarakteristike korištenih tehnologija:

Jednostavna manipulacija i pristupanje elementima preko jQuery i CSS

Jednostavno korištenje animacijaMobilnost zbog korištenja “plugin”Relativno kratak kod

06.03.2012.

5

HTML5Nova generacija HTML Dizajniran da bude cross-browserUvodi nove elemente , API :

Video i audioCanvas API – Canvas Text ApiGeolocationFileSystem APIFile API ....

06.03.2012.

6

HTML5 KompatibilnostRelativno nova tehnologija – slaba kompatibilnostPrepoznavanje kompatibilnosti :

Modernizr bibliotekaRučna provjera

06.03.2012.

7

Canvas API2D podloga za crtanje

Koristi direktni (“immediate”) mod crtanjaKoristi se za:

Naprednu grafiku ( 2D i 3D)Animacije

Problem kompatibilnosti kod Internet ExploreraRiješenje problema :

Excanvas biblioteka

06.03.2012.

8

Canvas APIIscrtavanje se obavlja preko Context(“2d”)Context je osnovna funkcija za crtanje svih oblika na

Canvas elementu

06.03.2012.

9

Prije i poslije aplikacijaPo uzoru na originalnu aplikaciju napravljena je ova nova

aplikacija sa dodanim svojstvima kao što su :Galerija slika Direktan pristup “prije i poslije” efektuUčitavanje korisničkih fotografija

Aplikacija koristi tehnologije:HTML5 Canvas APIHTML5 File APIKineticJS biblioteku

06.03.2012.

10

Prije i poslije aplikacijaKineticJS biblioteka omogućuje više slojni način crtanja

na Canvas elementuSadrži slojeve:

1. “buffer” sloj2. “backstage” sloj3. korisnički sloj4. kompozicija slojeva

Svaki oblik na sloju je objekt

06.03.2012.

11

GalerijaSvaka slika u galeriji je objekt sa svojim svojstvimaOdabirom određenih slika prebacuje se iz galeriju u “prije

i poslije efekt”

06.03.2012.

12

Prije i poslije efektSvaka slika za “prije i poslije efekt”se nalazi u svom slojuEfekt se ostvaruje manipulacijom piksela (mijenja se

vrijednost RGBA)

06.03.2012.

13

Učitavanje korisničkih fotografijaPomoću File API (File Reader API) omogućeno je

učitavanje korisničkih slikaNakon odabira , slike se prebacuju u “Prije i poslije efekt”Povratna informacija File Reader API je u obliku

06.03.2012.

06.03.2012. 14

Hvala na pažnji

Pitanja?